/*
Theme Name: Tsunairu
Author URI: https://wordpress.org/
Version: 1.0
Author: Kotohogi-inc.

*/

html {scroll-behavior: smooth;}

body {
  color: #454545;
  font-family: "Yu Gothic", YuGothic, 'Zen Kaku Gothic New', sans-serif;
  margin: 0;
  background-color: #ffffff;
}

p {
  text-align: left;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.1em;
}

img {
  max-width: 100%;
}

ul {
  list-style: none;
}

a {
  transition: color .3s;
  text-decoration: none;
  color: #454545;
}

/* コンテンツをふわっと出現 */

nav ul {
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 756px) {
  p{
    font-size: .9em;
  }
}

/** -----------------------------------
   色の指定
-------------------------------------**/

:root {
  --green: #9AC57B;
}

/** -----------------------------------
    共通
-------------------------------------**/
.section-inner {
  width: 100%;
  max-width: 960px;
  margin: 40px auto;
}

.sp-on{
  display: none;
}

/* 改行関連 */
.sp-br{
  display: none; /* SPの改行を隠す */
}

@media screen and (max-width: 900px) {


  .pc-br2 {
    display: none;
  }

}

@media screen and (max-width: 756px) {

  .sp-br {
    display: block;
  }

  .pc-br {
    display: none;
  }

}

@media screen and (max-width: 756px) {
  .pc-on {
    display: none;
  }

  .sp-on {
    display: block;
  }
}

.nico {
    display: block;
    line-height: 1px;
    margin-top: 10px;
}
.nico img{
  width: 50px;
}

.bold{
  font-weight: bold;
}

.marker-g{
  background: linear-gradient(transparent 40%, #f0f6a7 85%);
}

/* ＼スラッシュの装飾／ */
.highlight-text {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.5em;
}

.highlight-text::before,
.highlight-text::after {
  content: "＼";
  position: absolute;
  top: 0;
  font-size: 1.2em;
  color: #999;
}

.highlight-text::after {
  content: "／";
  right: -1.2em;
}

.highlight-text::before {
  left: -1.2em;
}

.highlight-green::before,
.highlight-green::after{
  color:var(--green);
}


/** -----------------------------------
    アニメーション
-------------------------------------**/
.fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
  will-change: opacity, transform;
}

.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}


.fade-in-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition-delay: var(--delay, 0s); /* ← ここで個別に遅延 */
  will-change: opacity, transform;
}

.fade-in-item.visible {
  opacity: 1;
  transform: translateY(0);
}


.fade-in-item {
  opacity: 0;
  transition: all 0.6s ease-out;
  will-change: opacity, transform;
}

.fade-in-item.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* 上から */
.from-top {
  transform: translateY(-20px);
}

/* 下から */
.from-bottom {
  transform: translateY(20px);
}

/* 左から */
.from-left {
  transform: translateX(-20px);
}

/* 右から */
.from-right {
  transform: translateX(20px);
}



/** -----------------------------------
    
-------------------------------------**/

/** -------- タブレット -------- **/
@media screen and (max-width: 600px){


}
/** -------- sp -------- **/
@media screen and (max-width: 500px){

}




/** -----------------------------------
    フォント
-------------------------------------**/
@font-face {
  font-family: 'Century Gothic';
  src: url('/wp-content/themes/tri_2023/fonts/Century_Gothic.ttf') format('truetype');
}




/** ----------------------------------------------------------------------
      ヘッダー
  ------------------------------------------------------------------------**/
.header__title {
  width: 130px;
}

.header__title img {
  vertical-align: middle;
}


nav {
  max-width: 1000px;
}

.header_all {
  color: #fff;
  display: flex;
  position: fixed;
  top: 0px;
    left: 0;
  width: 100%;
  z-index: 100;
  align-items: center;
  justify-content: space-around;
  padding-top: 15px;
  padding-bottom: 15px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  background-color: transparent; /* 初期は透明 */
}
.header_all.scrolled {
  background-color: rgba(255, 255, 255, 0.95); /* スクロール後の背景色 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 影で浮かせる */
}


.header_all a {
  color: white;
  transition: color 0.3s ease;
}

.header_all.scrolled a {
  color: #333;
}
.header_all ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.header_all li {
  padding: 16px 0 16px 18px;
}

.header_all li a {
  font-size: 13px;
  letter-spacing: 1.5px;
}

.header_all li a:hover {
  font-weight: bold;
    color: #333;
}



.header_button a {
  padding: 1em 1.5em;
  display: block;
  height: 100%;
  color: #b8d4d4 !important;
  text-decoration: none;
  background-color: #fff;
  font-size: 12px;
  margin-left: 16px;

}

.header_button a i {
  display: block;
  padding: 2px 0px 0px 0px;
  font-size: 18px;
  line-height: 18px;
  text-align: center;

}

.headermenu {
  display: flex;
}


.contact_button {
  right: 20px;
  background-color:var(--green);
  padding: 10px 15px;
  transition: 0.8s;
  width: 164px;
  border-radius: 5px;
  margin-left: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact_button a {
  color: #fff!important;
  letter-spacing: 0.1rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
}

.contact_button:hover {
  background-color: #cedc83;
  transition: 0.8s;
}

#navArea {
  display: none;
}

/** -------- タブレット -------- **/
@media screen and (max-width: 1024px) {

  .header_all {
    display: none;
  }

  #navArea {
    display: block;
  }

}

@media screen and (max-width: 800px) {

  nav ul li a {
    font-size: 11px;
  }
}

/** -------- スマホ -------- **/
@media screen and (max-width: 1024px) {




  nav {
    display: block;
    position: fixed;
    top: 0;
    left: -300px;
    bottom: 0;
    width: 300px;
    background: #ffffff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: all .5s;
    z-index: 3;
    opacity: 0;
  }

  .open nav {
    left: 0;
    opacity: 1;
  }

  nav .inner {
    padding: 40px 35px 25px;
  }

  nav .inner ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  nav .inner ul li {
    position: relative;
    margin: 0;
    border-bottom: 1px solid #daebda;
  }

  nav .inner ul li a {
    display: block;
    color: #666;
    font-size: 13px;
    padding: 1.5em 0 1.5em 1em;
    text-decoration: none;
    transition-duration: 0s;
    letter-spacing: 2px;
  }




  nav .inner ul li span {
    font-size: 10px;

  }


}
  @media screen and (max-width: 767px) {
    nav {
      left: -220px;
      width: 290px;
    }}
  /*============
  .toggle_btn
  =============*/
  .toggle_btn {
    display: block;
    position: fixed;
    top: 30px;
    right: 30px;
    width: 35px;
    height: 30px;
    transition: all .5s;
    cursor: pointer;
    z-index: 3;
  }

  .toggle_btn span {
    display: block;
    position: absolute;
    left: 0;
    width: 35px;
    height: 2px;
    background-color: #333;
    border-radius: 4px;
    transition: all .5s;
  }

  .toggle_btn span:nth-child(1) {
    top: 4px;
  }

  .toggle_btn span:nth-child(2) {
    top: 14px;
  }

  .toggle_btn span:nth-child(3) {
    bottom: 4px;
  }

  .open .toggle_btn span {
    background-color: #fff;
  }

  .open .toggle_btn span:nth-child(1) {
    -webkit-transform: translateY(10px) rotate(-315deg);
    transform: translateY(10px) rotate(-315deg);
  }

  .open .toggle_btn span:nth-child(2) {
    opacity: 0;
  }

  .open .toggle_btn span:nth-child(3) {
    -webkit-transform: translateY(-10px) rotate(315deg);
    transform: translateY(-10px) rotate(315deg);
  }

  /*============
  #mask
  =============*/
  #mask {
    display: none;
    transition: all .5s;
  }

  .open #mask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .8;
    z-index: 2;
    cursor: pointer;
  }
  /*============
  main
  =============*/
  main {
    padding: 30px;
  }
  main h1 {
    font-weight: 400;
    text-align: center;
  }




/** -----------------------------------
      footer
-------------------------------------**/


.footer-inner {
  background: #9dc480;
  color: #fff;
  padding: 3rem 1rem 1rem;
  text-align: center;
}

.footer-brand {
  margin-bottom: 2rem;
}

.footer-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #fff;
}

.footer-logo img {
  width: 240px;
  margin-bottom: 0.5rem;
}
.footer-nav{
  margin: 0 auto;
}


.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.footer-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 1px;
}


.footer-bottom {
  font-size: 0.8rem;
  color: #fff;
  margin: 0 auto;
}

.footer-bottom p{
  margin: 0 auto;
}

.footer-bottom a {
    color: #ffffff;
    font-size: 12px;
    text-align: center;
    display: block;
}
  
.copyright {
    width: 100%;
    letter-spacing: 1.3px;
    text-align: center;
    font-size: 10px;
    line-height: 2;
    margin: 0;
    padding: 10px 0;
}

@media screen and (max-width: 768px) {
  .footer-nav{
  all: unset;
      display: block !important;
}
  .footer-nav {
    display: block !important;
    position: relative;
  }

  .footer-nav ul {
    flex-direction: column;
    gap: 1rem;
  }

  .footer-nav li {
    text-align: center;
  }
}



/** -----------------------------------
    トライアルご案内
-------------------------------------**/

#forTrial {
    padding-bottom: 80px;
      margin: 40px auto;
}

#forTrial h2{
  text-align: center;
}

#forTrial p{
    text-align: center;
}
#forTrial .green_button {
  background-color: var(--green);
  padding: 10px 15px;
  transition: 0.8s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  margin: 0 auto;
}

#forTrial .green_button a {
  color: #fff;
  letter-spacing: 0.1rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

#forTrial .green_button:hover {
  background-color: #76b2d0;
  transition: 0.8s;
}




/** -----------------------------------
    FLOW 
-------------------------------------**/

#flow {
  background: #fff;
  padding: 3em 1em;
  max-width: 900px;
  margin: 0 auto;
}
.flow-title {
  text-align: center;
  font-size: 1.8em;
  color: #9AC57B;
  margin-bottom: 2em;
  position: relative;
}

.flow-step {
    display: flex;
    gap: 3em;
    border: 1px solid #dcecd1;
    border-radius: 10px;
    padding: 2.4em 1.5em;
    margin-bottom: 1.5em;
    align-items: center;
}
.step-number {
  color: #9AC57B;
  font-size: 0.9em;
  text-align: center;
  min-width: 60px;
  font-family: 'Century Gothic',"Yu Gothic", YuGothic,sans-serif;
  letter-spacing: 1.5px;
  font-weight: lighter;
}
.step-number span {
  display: block;
  font-size: 3em;
}

.step-icon {
  margin-top: 0.5em;
}

.step-icon img {
  width: 80px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.step-content  {
  width: 80%;
}
.step-content h3 {
  margin: 0 0 0.5em;
  font-size: 1.4em;
  letter-spacing: 1.8px;
}
.step-content p {
  margin: 0;
  font-size: 0.95em;
  line-height: 1.6;
}
.step-content a {
  color: #9AC57B;
  text-decoration: underline;
}


@media (max-width: 600px) {
  .flow-step {
    flex-direction: column;
        gap: 1em;
  }
  .step-number {
    text-align: left;
  }

  .step-number span {
  display: inline;
font-size: 2em;
        padding-left: 10px;
}
.step-content h3 {
  text-align: center;
}
.flow-title {
    font-size: 1em;
}

}

.toLP {
    margin: 0 auto;

}

.toLP p{
    text-align: center;
    font-size: .9rem;
}


#flow .green_button {
  background-color: transparent;
  border: #9AC57B 1px solid;
  padding: 10px 15px;
  transition: 0.8s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  margin: 0 auto;
}

#flow .green_button a {
  color: #9AC57B;
  letter-spacing: 0.1rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

#flow .green_button:hover {
  background-color: var(--green);
  transition: 0.8s;
  color: #ffffff;
}

#flow .green_button a:hover {
  color: #ffffff;
}


/* ボタン　緑→白 */

.button-green {
  display: flex;
  justify-content: center;
  align-items: center;
width: 40%;
  margin: 0 auto;
  padding: .9em 2em;
  border: 1px solid #fff;
  border-radius: 5px;

  background-color: #9ac57b;
  color: #fff;
  font-size: 1em;
  font-weight: 600;
}



.button-green:hover {
  color: #fff;
  border: 1px solid #76b2d0;
  transition: 0.8s;
  background-color: #76b2d0;

}

/* ボタン　白→緑 */

.button-white {
  display: flex;
  justify-content: center;
  align-items: center;
width: 40%;
  margin: 0 auto;
  padding: .9em 2em;
  border: 1px solid #9ac57b;
  border-radius: 5px;
  background-color: #fff;
  color: #9ac57b;
  font-size: 1em;
  font-weight: 600;
}



.button-white:hover {
  color: #fff;
  border: 1px solid #76b2d0;
  transition: 0.8s;
  background-color: #76b2d0;

}

@media (max-width: 600px) {
.button-green {
    width: 68%;

}

.button-white {
    width: 68%;

}
}