@charset "utf-8";

/*==================================================
common
===================================*/

:root {
    --primary-white: #FAFAFA;
    --primary-beige: #F8F7F4;
    --primary-black: #363636;
    --primary-green: #87CF5B;
    --primary-darkgreen: #2DA31A;
    --primary-blue: #49BEE2;
    --primary-darkblue: #1890E6;
    --primary-orange: #FC9A3F;
    --primary-simpleeorange: #FA6900;
    --contentWidth: 91.4%;
    --contentPadding: 4.2%;
}

html {
    font-size: 62.5%;
}

body {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
    "slnt" 0;
    color: var(--primary-black, #363636);
    background-color: var(--primary-beige, #F8F7F4);
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
}

.title {
    margin-top: 120px;
}
.title__topic {
    font-family: "Zen Kaku Gothic Antique";
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 1.8px;

}
.title__subTopic {
    font-family: Montserrat;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
    padding: 0 27px;
    margin-top: 7px;
}
.title__subTopic::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background-color: var(--primary-simpleeorange);
    margin-right: 14px;
    left: 0; /* 左端から配置 */
    top: 0;
    bottom:0;
    margin: auto 0;
}

.title__subTopic.blue::before {
    background-color: var(--primary-darkblue);
}
.title__subTopic.grn::before {
    background-color: var(--primary-darkgreen);
}

.checkmark {
    height: 25px;
    width: 25px;
    margin-right: 10px;
}

.openModal,
.btn__sub,
.tab-btn--company.anotherTab,
.tab-btn--english.anotherTab {
    display: block;
    width: 300px;
    height: 50px;
    border-radius: 30px;
    box-shadow: 0px 7px 0px 0px rgba(46, 45, 45, 0.07);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 1.5px;
    line-height: 4em;
    margin: 40px auto 70px;
    transition-duration: .5s;
}
.btn__sub {
    background-color: var(--primary-beige);
    color: var(--primary-darkblue);
}
.openModal:hover,
.btn__sub:hover,
.tab-btn--company.anotherTab:hover,
.tab-btn--english.anotherTab:hover {
    transform: translateY(4px);
    box-shadow: none;
}
.tab-btn--company.anotherTab,
.tab-btn--english.anotherTab {
    margin: 0 auto;
}

.btn {
    margin-top: 70px;
}

.btn__session,
.btn__entry,
.btn__contact,
.btn__media {
    display: block;
    width: 300px;
    height: 60px;
    border-radius: 30px;
    box-shadow: 0px 10px 0px 0px rgba(46, 45, 45, 0.1);
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    line-height: 3.5em;
    margin: 0 auto;
    position: relative;
    transition-duration: .5s;
}
.btn__session:hover,
.btn__entry:hover {
    transform: translateY(4px);
    box-shadow: none;
}

.btn__contact:hover,
.btn__media:hover {
    background-color: var(--primary-orange);
    opacity: 0.7;
    transform: translateY(4px);
    box-shadow: none;
}

.btn__session::after,
.btn__entry::after,
.btn__contact::after,
.btn__media::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
    right: 20px;
    top: 23px;
}


.btn__session {
    border: 2px solid var(--primary-simpleeorange);
    background: #FFF;
    color: var(--primary-simpleeorange);
}
.btn__entry {
    background: var(--primary-simpleeorange);
    color: #FFF;
    margin-top: 20px;

}
.btn__media {
    margin-top: 20px;
}
.simplee_logo {
    width: 130px;
}

@media screen and (min-width:769px) {
    .title {
        margin: 170px auto 0;
        max-width: 1080px;
    }
    .title__topic {
        font-size: 3.4rem;
        letter-spacing: 3px;
    }
    .title__subTopic {
        font-size: 1.6rem;
        padding: 0 27px;
    }
    .btn {
        display: flex;
        justify-content: center;
        gap: 0 20px;
        margin-top: 80px;
    }
    .btn__session,
    .btn__entry,
    .btn__contact,
    .btn__media {
        width: 330px;
        border-radius: 40px;
        height: 70px;
        font-size: 2rem;
        line-height: 68px;
        margin: 0;
    }
    .btn__session::after,
    .btn__entry::after,
    .btn__contact::after,
    .btn__media::after {
        border-bottom: 3px solid;
        border-right: 3px solid;
        transform: rotate(-45deg);
        right: 24px;
        top: 30px;
    }
    .btn__entry,
    .btn__media {
        margin-top: 0;
    }
    .openModal,
    .btn__sub {
        width: 330px;
        height: 70px;
        border-radius: 40px;
        font-size: 1.4rem;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.6px;
        line-height: 5em;
        display: block;
        margin-top: 40px;
    }
    .simplee_logo {
        width: 200px;
    }
}
@media screen and (min-width: 1000px) {
    .title {
        margin: 220px auto 0;
    }
}

/*==================================================
header
===================================*/
.header {
    padding: 0px var(--contentPadding);
    position: fixed;
    z-index: 500;
    background-color: var(--primary-beige);
    width: 100%;
    height: 70px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
}

/*==================================================
nav
===================================*/


#g-nav {
    position: fixed;
    z-index: 999;
    top: 0;
    right: -120%;
    width: 100%; /* 画面の右端に寄る幅を調整 */
    height: 100vh;
    background: var(--primary-orange);
    transition: right 0.7s;
    overflow-y: auto; /* コンテンツがはみ出た場合にスクロール可能にする */
    border-radius: 30px 0 0 30px;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* 半透明の黒 */
    z-index: 998; /* ナビゲーションよりも下に配置 */
    display: none; /* 最初は非表示 */
    transition: background-color 0.7s ease;
}


#g-nav.panelactive {
    right: 0;
    overflow-y: auto; /* パネルが表示されたときにスクロール可能にする */
}

#g-nav.panelactive ~ .overlay {
    display: block; /* ナビゲーションが開いているときにオーバーレイを表示 */
}

#g-nav {
    padding: 15px 0 50px;
}
#g-nav li{
	list-style: none;
}

.headerlogo.nav {
    margin-left: 30px;
    margin-top: 5px;
}
.nav__list {
    margin: 70px auto 0;
    width: 310px;
}
.nav__item {
    font-size: 1.6rem;
    font-weight: 700;
	text-decoration: none;
	padding:15px 10px;
	display: block;
}

.nav__subitem {
    margin-top: 10px;
}
.nav__subtxt {
    position: relative;
    font-size: 1.2rem;
    margin-left: 21px;
    margin-top: 5px;
    line-height: 3em;
}
.nav__subtxt::before {
    content: '';
    display: block;
    position: absolute;
    width: 10px;
    height: 2px;
    background-color: rgba(248, 247, 244, 0.60);
    top: 8px;
    left: -20px;
}
.btn.nav {
    margin: 50px auto 0;;
}
.simplee_logo.header {
    padding: 0;
    width: 160px;
    box-shadow: none;
}
/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:absolute;
    z-index: 9999;/*ボタンを最前面に*/
	top:14px;
	right: 10px;
	cursor: pointer;
    width: 50px;
    height:50px;
    
}
	
.openbtn.active {
    position: fixed; /* .openbtn がアクティブのときに固定 */
    top: 10px; /* 画面上端からの距離 */
    right: 10px; /* 画面右端からの距離 */
   
}
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all 0.4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: var(--primary-simpleeorange);
  	width: 45%;
    
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 40%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 40%;
}

@media screen and (min-width:768px) {
    #g-nav{
        width:600px;
    }
   
    .btn.nav {
        flex-direction: column;
        gap: 30px 0;
        width: 330px;
        margin: 50px auto 0;
    }
    .nav__item a {
        position: relative;
    
      }
    .nav__item a::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -5px;
        width: 0;
        height: 1.5px;
        background-color: var(--primary-orange);
        transition: width 0.5s;
      }
    
      .nav__item a:hover::after {
        width: 100%;
      }

  
    

}
@media screen and (min-width:1025px) {
    .header {
        position: fixed;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
    }
    .headerlogo.nav {
        box-shadow: none;
    }
    #g-nav {
        right: 0; /* ナビゲーションを常時表示 */
        width: auto; /* 幅を自動調整 */
        border-radius: 0; /* 角丸を削除 */
        height: 100%;
        background-color: transparent;
        position: static;
        margin: 0;
        padding: 0;
        overflow:unset;
    }

    .nav__list {
        position: static;
        display: flex; /* 横並びにする */
        justify-content: flex-end; /* 右寄せにする */
        margin: 0;
        padding: 0;
        width: auto; /* 幅を自動調整 */
    }

    .nav__subitem {
        display: none;
        position: absolute;
        background-color: var(--primary-white);
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
        z-index: 100;
        padding: 20px 20px 20px 40px;
        width: 340px;
        border-radius: 0 30px 30px 30px;
    }
    
    .nav__item:hover .nav__subitem {
        display: block;
    }
    
    .nav__item {
        color: var(--primary-black);
        margin-left: 15px; 
        font-size: 1.4rem; /* メニュー項目の文字サイズを調整 */
        padding: 20px 10px 10px;
    }

    .nav__item::before {
        display: none; /* メニュー項目のボールを隠す */
        background-color: transparent;
        border-radius: 0%;
    }
    .nav__item.list {
        position: relative;
    }

    .nav__item.list::before{
        display: block;
            content:'';
            position: absolute;
            left:-8px;
            top:26px;
            width:8px;
            height:8px;
            border-top: 2px solid rgba(252, 154, 63, 0.70);
              border-right:2px solid rgba(252, 154, 63, 0.70);
              transform: rotate(135deg);
    }
    .nav__item.list:hover {
        cursor: pointer;

    }
    .nav__subtxt::before {
        background-color: var(--primary-orange);
    }
    .nav__item a {
        text-decoration: none;
    }

    .nav__subitem {
        display: none; /* サブメニューを非表示 */
        letter-spacing: 0.7px;
    }

    .btn.nav {
        display: none; /* ボタンを非表示 */
    }
    .simplee_logo.nav,
    .openbtn,
    .nav__subitem,
    .btn.nav {
        display: none;
    }
    .overlay {
        display: none;
    }
}
/*==================================================
main　FV・４つのポイント・導入文
===================================*/
/* 
.mainImg .mainImg__pc,
.mainImg .mainImg__sp {
        background-position: cover;
} */
.mainImg .mainImg__pc,
.mainImg__tab,
.btn.fv.pc {
    display: none;
}
.mainImg .mainImg__sp {
    width: 100%;
    margin-top: 70px;
}
.point__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 360px;
    gap: 20px 5px;
    margin: 44px auto 0;
}

.point__item {
    width: 170px;
    font-family: "Zen Kaku Gothic Antique";
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.6px;
}

.mainTopic {
    background-image: url(../images/photo/mainTopic_background_sp.png);
    background-size: cover;
    background-repeat: no-repeat;
    margin: 100px auto 0;
    position: relative;
}

.mainTopic__title {
    text-align: center;
    font-family: "Zen Kaku Gothic Antique";
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.2em; 
    letter-spacing: 1.2px;
    margin-top: 120px;
    opacity: 0;
  transform: translateY(30px); /* 下から50pxの位置に移動 */
  transition: opacity 0.6s ease, transform 0.6s ease; /* アニメーションの設定 */
}
.mainTopic__title.show {
    opacity: 1;
    transform: translateY(0); /* 元の位置に戻す */
  }
.dot-text {
    padding-top: .4em;
    background-position: top left -6px;
    background-repeat: repeat-x;
    background-size: 1.3em .3em;
    background-image: radial-gradient(.15em .15em at center center,orange,orange 100%,transparent);
}
.mainTopic__subtitle {
    margin: 100px auto 0;
}

.mainTopic__photo.sp {
    width: 80%;
    max-width: 400px;
    margin: 0 auto;
    display: block;
}

.mainTopic__txt {
    font-family: "Zen Kaku Gothic Antique";
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 2.7em;
    letter-spacing: 1.4px;
    margin: 40px auto 0;
    width: 310px;
}

.mainTopic__txt.last {
    margin: 100px auto 0;
    opacity: 0; /* 最初は非表示 */
    transform: translateY(20px); /* 下から20px上に移動 */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    text-align: center;
}
.mainTopic__txt.last.fade-in-visible {
    opacity: 1; /* 表示 */
    transform: translateY(0); /* 元の位置に戻す */
  }
  .btn.lead {
    margin-top: 100px;
}
/* マーカー */
.marker {
    background-color: transparent;
    position: relative;
    z-index: 1; /* 背景画像より手前に表示 */
  }
  
  .marker::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: rgba(73, 190, 226, 0.50);/* 初期の背景色 */
    transition: width 1.5s ease-out; /* アニメーションの速度とイージングを設定 */
    z-index: -1;
  }
  .marker.in-view::before {
    width: 100%;
  }

  
  .marker.english::before {
    background: rgba(135, 207, 91, 0.50); /* 緑 */
  }
  
  .marker.like::before {
    background: rgba(250, 105, 0, 0.50);/* ピンク */
  }
  
/*==================================================
main　FV・４つのポイント・導入文　pc var
===================================*/
@media screen and (min-width:768px) {

    .mainImg__tab {
        display: block;
        width: 100%;
    }
    .mainImg .mainImg__tab {
        padding-top: 70px;
    }
    .mainImg__sp {
        display: none;
    }
    .mainTopic__title {
        margin-top: 160px;
        font-size: 2.6rem;
    }
}
@media screen and (min-width:821px) {
    h1 br:nth-of-type(2) {
        display: none; /
    }
}
@media screen and (min-width:1000px) {

    .mainImg .mainImg__pc {
        display: block;
        width: 100%;
        padding-top: 70px;
    }
    
    .mainImg__tab,
    .mainTopic__photo.sp {
        display: none;
    }
    
    .btn.fv.pc {
        display: flex;
        position: absolute;
        bottom:15vw;/* 親要素の中央に配置するための基準点 */
        left: 50%; /* 親要素の中央を基準にする */
        transform: translateX(-50%); 
        z-index: 100; 
    }
    .btn.fv.sp {
        display: none;
    }

    .point__list {
        display: flex;
        flex-wrap: nowrap;
        width: 780px;
        margin: -110px auto 0;
        gap: 30px;
    }
    .point__item img {
        height: 25px;
        width: 25px;
        margin-right: 10px;
    }
    .point__item {
        font-size: 1.6rem;
        letter-spacing: 2px;
        width: auto;
        justify-content: center;
    }    
    .mainTopic {
        margin-top: 150px;
        background-image: url(../images/photo/mainTopic_background_pc.png);
    }
    .mainTopic__title {
        font-size: 3rem;
        letter-spacing: 5px;
    }
    .mainTopic__txt {
        width: 370px;
        font-size: 1.6rem;
        letter-spacing: 1.6px;
        margin: 30px auto 0;
        text-align: left;
    }
    .mainTopic__txt.last {
        text-align: center;
    }

    .mainTopic__subtitle {
        position: relative;
      }
    
      .mainTopic__subtitle::before,
      .mainTopic__subtitle::after {
        content: '';
        position: absolute;
        width: 50%;
        height: 50%;
        background-size: cover;
        background-repeat: no-repeat;
      }
    
      .mainTopic__subtitle::before {
        top: 120px;
        right: 0;
        background-image: url(../images/photo/children.png); 
        background-position: top right;
        background-size: 50%;
      } 
    
      .mainTopic__subtitle::after {
        bottom: 0;
        left: 0;
        /* 左下の背景画像 */
        background-image: url(../images/photo/mainTopic_sitter.png); 
        background-position: bottom left;
        background-size: 50%;
      } 
}


@media screen and (min-width:1500px) {
    .btn.fv.pc {
        bottom: 13vw;
    }
}
/*==================================================
tab
===================================*/

.section--tab-wrap{
    margin-top: 70px;
    justify-content: center;
}
   
.section--tab-wrap ul {
    display: flex;
}
   
.tab-btn {
    width: 50%;
    height: 120px;
    list-style: none;
    cursor: pointer;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 2em;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.tab-btn span {
    color: var(--primary-beige);
    font-size: 1.6rem;
    letter-spacing: 5px;
}


.tab-btn--company {
    background-color: var(--primary-blue);
    margin-right: 5px;
    border-radius: 0 70px 0 0;
    transition-duration: .5s;
}
.tab-btn--company:hover {
    background-color: var(--primary-darkblue);
    opacity: 0.7;
    transition: 0.7s;
}
.tab-btn--english {
    background: var(--primary-green);
    margin-left: 5px;
    border-radius: 70px 0 0 0;
    transition-duration: .5s;
}
.tab-btn--english:hover {
    background-color: var(--primary-darkgreen);
    opacity: 0.7;
    transition: 0.7s;
}
.tab-contents-en{
 display: none;
}

@media screen and (min-width:429px){
    .section--tab-wrap{
        margin-top: 120px;
    }
    .tab-btn--company {
        border-radius: 0 100px 0 0;
    }
    .tab-btn--english {
        border-radius: 100px 0 0 0;
    }
    .tab-btn--company.span {
            white-space: nowrap; /* テキストの改行を禁止 */
     }
}
/*==================================================
保育経験を活かす（前半）こんなあなたに・お悩み
===================================*/

.introduction.company {
    background-color: #deeef1;
    height: auto;
    border-top: 5px solid var(--primary-blue);
}
.introduction.company,
.introduction.english {
    padding: 100px var(--contentPadding) 500px;
    z-index: -10;
}
  /* こんなあなたに */
.title.target{
    margin-top: 0;
}
.target.title__subTopic::before {
    color: var(--primary-darkblue);
}

.target__list {
    display: flex;
    flex-direction: column;
    margin:  70px auto 40px;
    gap: 17px 0;
    max-width: 300px;
}
.target__item {
    font-size: 1.6rem;
    display: flex;   
}

/* 悩み */

.worryTitle {
    color: #6F6C6C;
    font-family: "Zen Kaku Gothic Antique";
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 2em;
    display: flex;
    margin-bottom: 4px;
}
.worryList {
    max-width: 550px;
    margin: 80px auto;
}

/* 保育士の悩み */
.childcare__item.worry2,
.sitter__item.worry2 {
    display: flex;
    margin-top: 20px;
}

.childcare__list,
.sitter__list,
.english__list.right {
    flex-direction: column;
}

.childcare__item.flex,
.sitter__item.flex,
.english__item.flex {
    display: flex;
    margin-top: 20px;
}
.childcare__item.flex {
    justify-content: flex-end;
}

.childcare__txt,
.sitter__txt,
.english__txt {
    background: rgba(0, 0, 0, 0.10);
    padding: 25px 30px;
    font-size: 1.6rem;
    text-align: center;
}

.childcare__txt.worry1,
.english__txt.worry1 {
    border-radius: 30px 30px 0px 30px;
    max-width: 300px;
    margin: 0 auto;
}
.childcare__txt.worry2 {
    border-radius: 30px 0px 30px 30px;
    margin-bottom: 10px;
}
.childcare__txt.worry2 br:nth-of-type(2) {
    display: none;
}

.sitter__txt.worry1,
.english__txt.worry3 {
    border-radius: 30px 30px 30px 0px;
    max-width: 300px;
    margin: 0 auto;
}
.sitter__txt.worry2,
.english__txt.worry4 {
    border-radius: 30px 30px 30px 0;
}
.sitter__txt.worry2 {
    margin-bottom: 95px;
}
.sitter__txt.worry2 br:first-of-type {
    display: none;
}

/* お悩みアイコン */
.childcare__icon,
.sitter__icon {
    width: 76px;
    height: 114px;
    flex-shrink: 0;
    z-index: 100;
}
.childcare__iconlist {
    flex-direction: column;
    
    margin-left: 40px;
}
.sitter__icontxt,
.childcare__icontxt {
    font-size: 1.4rem;
    margin-top: 5px;
    text-align: center;
}

.sitter__iconlist {
    margin-top: 100px;
}


/* シッターの悩み */
.sitter__list,
.english__list.right {
    margin-top: 10px;
}

/*==================================================
保育経験を活かす （前半）こんなあなたに・お悩み　tablet ver
===================================*/

@media screen and (min-width:429px){
    .title.target {
        flex-direction: column;
    }
    .target__list {
        max-width: 450px;
    } 
   .target__item br {
        display: none;
    } 

    .title__topic.company br,
    .title__topic.english br {
        display: none;
    }
}

/*==================================================
保育経験を活かす（前半）tab pc ver
===================================*/
@media screen and (min-width:769px){
    .tab-btn {
        height: 120px;
        padding: 10px 0;
        font-size: 2rem;
        letter-spacing: 2px;
    }
      .tab-btn span {
        font-size: 3.2rem;
        letter-spacing: 10px;
    }

    /* タブの中身 */
    .introduction {
        padding: 150px 0 70px;
    }
    .target,
    .worry,
    .about,
    .merit {
        max-width: 1080px;
        margin: 0 auto;
    }
    .title.target,
    .title.worry,
    .title.english,
    .title.about,
    .title.merit {
        text-align: left;
    }
    
    .title.target {
        flex-direction: column;
        margin: 0;
    }
    .target__list {
        max-width: 550px;
    }
    .target__item {
        font-size: 20px;
        letter-spacing: 0.6px;
    }
    
}

/*==================================================
保育経験を活かす（前半）こんなあなたに tab ver
===================================*/

@media screen and (min-width:1000px) {
    .target {
        display: flex;
        margin-top: 30px;

    }
    .target__list {
        margin:  40px auto 0;
        max-width: 500px;
    }
    .target__item br {
        display: block;
    } 

}

/*==================================================
保育経験を活かす（前半）お悩み pc ver
===================================*/
@media screen and (min-width:769px){
    .worryTitle br,
    .title__topic.company br {
        display: none;
    }
    .worryTitle {
        font-size: 1.4rem;
    }
    .worry {
        margin: 140px auto 0;
    }
    

    .worryList {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin: 80px auto 50px;
        gap: 0 30px;
        max-width: 1000px;
    }

    .childcare__list,
    .sitter__list,
    .english__list {
        margin: 0;
    }
    .childcare__item.flex,
    .sitter__item.flex,
    .english__item.flex {
        margin-top: 0;
        align-items: center;
        justify-content: center;
    }
    .childcare__item.flex {
        justify-content: flex-end;
    }
    
    .sitter__item.flex {
        justify-content: flex-start;
    }
    
    .childcare__txt,
    .sitter__txt,
    .english__txt {
        background: rgba(0, 0, 0, 0.10);
        padding: 40px;
        font-size: 2rem;
    }
    .childcare__txt.worry1,
    .english__txt.worry1 {
        max-width: 450px;
        margin: 0 auto 0 0;
    }
    .sitter__txt.worry1,
    .english__txt.worry3 {
        max-width: 450px;
        margin: 0 0 0 auto;
    }
    .childcare__txt.worry2 {
        margin-bottom:90px;
        border-radius: 30px 30px 0 30px;
    }
    .childcare__txt.worry2 br:nth-of-type(2) {
        display: block;
    }
    .sitter__txt.worry2 br:first-of-type {
        display: block;
    }
    .childcare__icon,
    .sitter__icon {
        width: 156px;
        height: 200px;
    }
    .childcare__icon {
        margin-top: 100px;
    }
    .sitter__icontxt, 
    .childcare__icontxt {
        margin-top: 15px;
    }

}


@media screen and (min-width:824px){
    .sitter__txt.worry2 br:first-of-type {
        display: none;
    }

}

/*==================================================
英語を活かす　（前半）こんなあなたに・お悩み
===================================*/

.introduction.english {
    background: #edf4e4;
    border-top: 5px solid var(--primary-green);
}


.english__list.left,
.english__list.right {
    justify-content: center;
}

.english__txt {
    margin-top: 20px;
}

/* お悩み */
.english__txt.worry2 {
    border-radius: 30px 30px 30px 0;
}
.english__txt.worry4 {
    margin: 0 0 100px 0;
}

.english__list.right {
    margin-top: 20px;
}
.english__icon {
    width: 76px;
    height: 114px;
    flex-shrink: 0;
    margin: 100px 10px 0 0;
}



/*==================================================
英語を活かす　（前半）こんなあなたに・お悩み　pc ver
===================================*/
@media screen and (min-width:769px){

    .worryList.english {
        gap: 0 20px;
        align-items: flex-start;
    }

    .english__icon {
        width: 156px;
        height: 239px;
        margin-right: 40px;
        margin-top: 120px;
    }
    
    .english__txt.worry1 {
        margin-left: 20px;
    }
    .english__txt.worry2 {
        border-radius: 30px 0 30px 30px;
        margin: 40px 40px 0 0;
    }
    .english__txt.worry3 {
        margin-left: 140px;
    }

}

@media screen and (min-width:824px){
    .english__txt br {
        display: block;
    }
}

/*==================================================
保育経験を活かす（後半） どんなお仕事？
===================================*/

.tab__last.company {
    background-color: var(--primary-blue);
    padding: 0 var(--contentPadding) 70px;
    box-shadow: 0px 10px 0px 0px rgba(46, 45, 45, 0.07);
}
.tab__last.company {
    margin-top: -620px;
}
.tab__last.english {
    margin-top: -590px;
}
.tab__last {
    border-radius: 0px 200px 0 0;
}

.survice {
    text-align: center;
    padding-top: 120px;
}
  

.survice__subtitle {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 3.5px;
    color: rgba(33, 23, 21, 0.53);
}
.survice__title {
    font-family: "Zen Kaku Gothic Antique";
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 2.4px;
    margin-top: 16px;
}
.title.about,
.title.merit {
    color: var(--primary-beige);
}
.title.about {
     margin-top: 0;
     padding-top: 100px;
}


.about__photo {
    display: block;
    width: 341px;
    flex-shrink: 0;
    border-radius: 30px;
    margin: 60px auto 0;
}

.about__item {
    margin: 50px auto;
    width: 300px;
}
.about__txt {
    font-size: 16px;
    line-height: 25px;
    margin: 0 auto;
    width: 273px;
   
}
.about__txt.block2 {
    margin-top: 25px;
}
.about__txt span {
    font-weight: 700;
}

/*==================================================
保育経験を活かす（後半） モーダルウィンドウ
===================================*/
/* モーダルウィンドウの基本スタイル */

.openModal {
    cursor: pointer;
    display: flex;
    gap: 27px;
}
.gg-search {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 16px;
    height: 16px;
    border: 2.5px solid;
    border-radius: 100%;
    margin-left: 23px;
    margin-top: 15px;
}
.gg-search::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    border-radius: 3px;
    width: 2px;
    height: 8px;
    background: currentColor;
    transform: rotate(-45deg);
    top: 10px;
    left: 12px
}

.modal {
    display: none; 
      position: fixed; 
      top: 0; 
      left: 0;
      width: 100%; 
      height: 100%; 
      background-color: rgba(0,0,0,0.3);
      z-index: 999;
    }
    
    .modal-content {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 70px 30px;
      background-color: var(--primary-beige);
      border: 3px solid var(--primary-orange);
      border-radius: 30px;
      width: 350px;
    }
    
    .closeModal {
        position: absolute;
        top: 90%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.4rem;
        letter-spacing: 1.8px;
        cursor: pointer;
        border: 0.5px solid rgba(33, 23, 21, 0.5);
        padding:  6px 15px 9px;
        border-radius: 30px;
        width: 130px;
        text-align: center;
        
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .closeModal__icon {
        width: 8px;
        height: 8px;
        margin: 4px 0 0 20px;
    }
/* モーダルウィンドウ内　テキストスタイル */
.openModal {
    background: rgba(250, 250, 250, 0.90);
    color: var(--primary-darkblue);
}
.modal__title {
    font-family: "Zen Kaku Gothic Antique";
    font-size: 2rem;
    font-weight: 700;
    line-height: 2em;
    letter-spacing: 1.7px;
    text-align: center;
}
.difference {
    margin: 60px auto 0;
    padding: 0 15px;
    width: 300px;
}
.difference__title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    position: relative;
    padding: 0 25px;
}

.difference__title::before {
    content: "";
    display: block;
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background-color: var(--primary-simpleeorange);
    left: 0; /* 左端から配置 */
    bottom: 4px;

}

.difference__item {
    margin-top: 35px;
}
.difference__txt {
    font-size: 1.4rem;
    letter-spacing: 0.7px;
    margin-top: 7px;
}
.difference__subtxt {
    margin: 60px auto 70px;
}
.difference__subitem {
    font-size: 1.4rem;
    line-height: 2.8rem;
    letter-spacing: 0.7px;
    text-align: center;
}
.difference__subitem span {
    font-weight: 700;
}
/*==================================================
保育経験を活かす（後半） メリット 　
===================================*/
.merit {
    margin-top: 100px;
}
.merit__list {
    display: flex;
    flex-direction: column;
    margin: 60px  0;
    gap: 25px 0;
}
.merit__item {
    background-color: var(--primary-white);
    width: 320px;
    height: 270px;
    border-radius: 30px;
    text-align: center;
    font-family: "Zen Kaku Gothic Antique";
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 40px 10px;
    margin: 0 auto;
    flex-direction: column;
}

.merit__item--01,
.merit__item--02,
.merit__item--03,
.merit__item--04,
.merit__item--english01,
.merit__item--english02,
.merit__item--english03,
.merit__item--english04 {
    position: relative;
}
.merit__item--01::before,
.merit__item--02::before,
.merit__item--03::before,
.merit__item--04::before,
.merit__item--english01::before,
.merit__item--english02::before,
.merit__item--english03::before,
.merit__item--english04::before  {
    position:absolute;
    content: '01';
    display: block;
    width: 58px;
    height: 58px;
    color: var(--primary-darkblue);
    font-family: "Zen Kaku Gothic New";
    font-size: 5.5rem;
    font-weight: 900;
    top: -40px;
    left: 30px;
}

.merit__item--02::before,
.merit__item--english02::before {
    content: '02';
}
.merit__item--03::before,
.merit__item--english03::before {
    content: '03';
}
.merit__item--04::before,
.merit__item--english04::before {
    content: '04';
}
.merit__icon {
    display: block;
    width: 55px;
    margin: 5px auto 20px;
}
.merit__txt {
    margin-top: 10px;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.8em; 
}
.merit__last {
    text-align: center;
    font-family: "Zen Kaku Gothic Antique";
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 2.5px;
}
.merit__last span {
    font-size: 3rem;
    line-height: 2em;
    letter-spacing: 1.8px;
}

.btn.tab {
 margin-top: 30px;
}


/*==================================================
英語を活かす（後半） どんなお仕事？ 
===================================*/
.tab__last.english {
    background-color: var(--primary-green);
    padding: 0 var(--contentPadding) 60px;
    box-shadow: 0px 10px 0px 0px rgba(46, 45, 45, 0.07);
}

.about__txt:last-of-type {
    margin-top: 20px;
}
.btn__sub.english {
    color: var(--primary-darkgreen);
}
.openModal.english {
    color: var(--primary-darkgreen);
}
/*==================================================
英語を活かす（後半） メリット 
===================================*/

.merit__item--english01::before,
.merit__item--english02::before,
.merit__item--english03::before,
.merit__item--english04::before {
    color: var(--primary-darkgreen);
}


/*==================================================
保育経験を活かす（後半） どんなお仕事？  　pc ver
===================================*/

@media screen and (min-width:426px){
    .survice__title.english br{
        display: none;
    }
    .about__item {
        width: 400px;
    }
    /* .about__txt br {
        display: none;
    } */
    .about__txt.block2 {
        margin-top: 20px;
    }
    .merit__last.company br {
        display: none;
    }
    
}
@media screen and (min-width:768px){
    .modal-content {
        width: 500px;
    }
}
@media screen and (min-width:769px){

    .tab__last {
        border-radius: 450px 450px 0 0;
    }
    .tab__last.company,
    .tab__last.english {
        margin-top: -630px;
    }
    
    .survice {
        padding-top: 180px;
    }
    .survice__subtitle {
        font-size: 1.6rem;
        letter-spacing: 3.2px;
    }
    .survice__title {
        font-size: 3.6rem;
        letter-spacing: 3.6px;
        margin-bottom: 20px;
    }
    .about__list {
        display: flex;
        flex-direction: row-reverse;
        margin: 60px auto 0;
    }
    .about__item {
        margin: 0 auto;
    }
    
    .about__txt br {
        display: block;
    }
    .about__photo {
        width: 341px;
        height: 223px;
        flex-shrink: 0;
        display: block;
    }
    .btn__B.english {
        color: var(--primary-darkgreen);
    }
    .gg-search {
        margin-left: 28px;
        margin-top: 26px;
    }

    /* モーダルウィンドウ */
    .closeModal {
        top: 86%;
    }
    .modal__title br {
        display: none;
    }
    .difference {
        margin: 60px auto 0;
        padding: 0;
        width: 460px;
    }
    .difference__txt {
        font-size: 1.6rem;
    }
    .difference__txt br {
        display: none;
    } 
    .difference__subtxt {
        margin: 60px auto 90px;
    }
    .closeModal__icon {
        margin-top: 3px;
    }
    .difference__subitem {
        font-size: 1.6rem;
    }
}


@media screen and (min-width:1000px){
    .survice__title br {
        display: none;
    }
    .about__photo {
        width: 500px;
        height: 348px;
        flex-shrink: 0;
        margin-top: -17px;
    }
    .about__photo.company {
        margin-top: -66px;
    }
    .modal-content {
        width: 700px;
    }
}
/*==================================================
英語を活かす（後半） メリット 　pc ver
===================================*/
@media screen and (min-width:1000px){
    .merit__list {
        flex-direction: row;
        gap: 0 10px;
    }
    .merit__item {
        height: 320px;
        padding: 60px 10px 40px;
    }
    .merit__item--english02 br {
        display: none;
    }
    .merit__txt {
        font-size: 1.6rem;
        margin-top: 20px;
    }
    .merit__last {
        font-size: 2.8rem;
    }
    .merit__last span {
        font-size: 4rem;
    }
    .merit__last br {
        display: none;
    }
    .merit__txt.debut br {
        display: none;
    }
}

@media screen and (min-width:1000px){
    .tab__last.company,
    .tab__last.english {
        padding: 0 var(--contentPadding) 100px;
    }
    .about__txt {
        width: 300px;
    }
}
/*==================================================
下タブ （もう一つの働き方を見てみる）
===================================*/
.anotherTab {
    padding: 40px 20px ;
}
.anotherTab.company {
    background-color: var(--primary-blue);
    box-shadow: 0px 10px 0px 0px rgba(46, 45, 45, 0.07);
    border-radius: 0 0 30px 0;
    margin-right: 6%;
    font-size: 1.6rem;
}
.anotherTab.english{
    background-color: var(--primary-green);
    box-shadow: 0px 10px 0px 0px rgba(46, 45, 45, 0.07);
    border-radius: 0 0 0 30px;
    margin-left: 6%;
}
.anotherTab__txt {
    width: 330px;
    margin: 0 auto;
    font-size: 1.4rem;
    line-height: 1.6em;
    letter-spacing: 0.8px;
}


.tab-btn--english.anotherTab,
.tab-btn--company.anotherTab {
    color: var(--primary-white);
    border-radius: 30px;
    margin-top: 20px;
    padding: 0;
    align-items: center;
    position: relative;
}
.tab-btn--english.anotherTab {
    background-color: var(--primary-darkgreen);
}
.tab-btn--company.anotherTab {
    background-color: var(--primary-darkblue);
}




.tab-btn--english.anotherTab::after,
.tab-btn--company.anotherTab::after {
    content: "";
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    border-top: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
    right: 20px;
    bottom: 20px;
    color: var(--primary-beige);
}


/*==================================================
下タブ （もう一つの働き方を見てみる）　pc ver
===================================*/
@media screen and (min-width:1000px) {
    .anotherTab {
        display: flex;
        justify-content: center;
        padding: 40px 60px ;
    }
    .anotherTab.company {
        width: 80%;
    }
    .anotherTab.english {
        width: 80%;
        margin: 0 0 0 auto;
    }
    .anotherTab__txt {
        width: 400px;
        line-height: 2em;
        letter-spacing: 0.8px;
        margin-right: 50px;
    }
    .anotherTab__txt.company {
        width: 400px;
        line-height: 2em;
        letter-spacing: 0.8px;
    }
    .anotherTab__txt br {
        display: none;
    }

    .tab-btn--english.anotherTab,
    .tab-btn--company.anotherTab {
        margin: 0;
    }
 
}


/*==================================================
tab以下　強み
===================================*/

.section--strength,
.section--mission,
.section--interview,
.section--step,
.section--faq {
    padding: 0 var(--contentPadding);
}

.strength__list {
    margin-top: 100px;
}
.strength__item {
    background: #FFF;
    max-width: 500px;
    padding: 60px 30px;
    flex-shrink: 0;
    border-radius: 30px;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 40px auto 0;
/* ふわっと表示　アニメーション */
    opacity: 0;
  transform: translateY(30px); /* 下から50pxの位置に移動 */
  transition: opacity 0.6s ease, transform 0.6s ease; /* アニメーションの設定 */
}
.strength__item.show {
    opacity: 1;
    transform: translateY(0); /* 元の位置に戻す */
  }

.strength__item--01,
.strength__item--02,
.strength__item--03,
.strength__item--04 {
    position: relative;
}
.strength__item--01::before,
.strength__item--02::before,
.strength__item--03::before,
.strength__item--04::before {
    position:absolute;
    content: '01';
    display: block;
    width: 58px;
    height: 58px;
    color: rgba(252, 154, 63, 0.80);
    font-size: 6.4rem;
    font-weight: 800;
    top: -50px;
    left: 30px;
}
.strength__item--02::before {
    content: '02';
}
.strength__item--03::before {
    content: '03';
}
.strength__item--04::before {
    content: '04';
}

.strength__photo {
    display: block;
    margin: 38px auto 0;
    border-radius: 30px;
    width: 280px;
}
.strength__txt {
    font-size: 1.6rem;
    font-weight: 400;
    margin-top: 36px;
}
.zero__list {
    margin: 50px auto 0;
    width: 280px;
}
.zero__item {
    font-size: 1.6rem;
    text-align: left;
    margin: 17px auto 0;
    display: flex;
    align-items: center;
}
.zero__icon {
    display: block;
    width: 25px;
    height: 25px;
    margin-right: 10px;
}
.free__list {
    margin: 36px auto 0;
    width: 320px;
}
.free__item {
    display: flex;
}
.free__txt {
    font-size: 1.6rem;
    font-weight: 400;
    text-align: left;
}
.support__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px 30px;
    margin: 60px auto 0;
    width: 300px;
}
.support__item {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.7px;
}
.support__icon {
    display: block;
    width: 53px;
    height: 53px;
    flex-shrink: 0;
    margin: 0 auto 15px;
}
.support__icon.money {
    margin-bottom: 32px;
}

/*==================================================
強み　pc ver
===================================*/
@media screen and (min-width:769px){

    .section--strength,
    .section--interview,
    .section--step,
    .section--faq {
        margin: 0 auto;
    }
    .strength__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 70px 0px;
        max-width: 1080px;
        margin: 100px auto 0;
    }
    .strength__item {
        font-size: 2rem;
        letter-spacing: 2.4px;
        width: 450px;
        margin: 0;
        padding: 80px 20px;
    }
    .strength__item--01::before,
    .strength__item--02::before,
    .strength__item--03::before,
    .strength__item--04::before {
    font-size: 6.4rem;
    top: -40px;
    }
    .strength__photo {
        display: block;
        margin: 50px auto 0;
        max-width: 320px;
    }
    .strength__txt {
        margin-top: 50px;
    }
    .strength__txt.zero {
        margin-top: 86px;
    }

    .zero__list {
        margin: 80px auto 0;
        width: 330px;
    }
    .zero__item {
        font-size: 2rem;
        margin-top: 26px;
    }

   
    .free__list {
        margin: 50px 0 0 60px;
    }
    .support__list {
        margin-top: 50px;
        gap: 40px 50px;
    }
    .support__item {
        font-size: 1.4rem;
    }
    .support__icon {
        display: block;
        width: 65px;
        height: 65px;
        flex-shrink: 0;
        margin: 0 auto 20px;
    }
    
}
@media screen and (min-width:1000px){
    .strength__item {
        width: 48%;
    }
}

/*==================================================
Simpleeについて　
===================================*/

.mission__center {
/* ふわっと表示　アニメーション */
    opacity: 0;
  transform: translateY(30px); /* 下から50pxの位置に移動 */
  transition: opacity 0.6s ease, transform 0.6s ease; /* アニメーションの設定 */
}
.mission__center.show {
    opacity: 1;
    transform: translateY(0); /* 元の位置に戻す */
  }

.section--mission {
    padding: 0;
}

.title.mission {
    padding: 0 var(--contentPadding);
}
.mission__center {
    background-color: var(--primary-orange);
    padding: 20px 0;
    margin-top: 120px;
    border-radius: 30px;
}
.mission__title {
    color: var(--primary-white);
    text-align: center;
    font-family: "Zen Kaku Gothic Antique";
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 1.7px;
    margin-top: 65px;
}
.mission__photo {
    display: flex;
    margin-top: 40px;
    width: 100%;
    justify-content: space-between;
}
.mission__photo img {
    width: 50%; 
    height: auto; /* アスペクト比を保持して自動的に高さを調整する */
}


.mission__txt {
    text-align: center;
    font-size: 1.6rem;
    line-height: 1.8em;

}
.mission__txt.top {
    margin-top: 40px;
}
.btn__sub.mission {
    color: var(--primary-black);
    margin: 40px auto 70px;
    display: flex;
}
.btnsub__txt {
    text-align: center;
    margin: 0 80px 0 115px;
}
.gg-external {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 10px;
    height: 10px;
    box-shadow:
        -2px 2px 0 0 var(--primary-black),
        -4px -4px 0 -2px var(--primary-black),
        4px 4px 0 -2px var(--primary-black);
    margin-right: 20px;
    margin-top: 19px;
}
.gg-external::after,
.gg-external::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    right: -4px
}
.gg-external::before {
    background: currentColor;
    transform: rotate(-45deg);
    width: 12px;
    height: 2px;
    top: 1px
}
.gg-external::after {
    width: 8px;
    height: 8px;
    border-right: 2px solid;
    border-top: 2px solid;
    top: -4px
}

@media screen and (min-width:768px){
.mission__title br {
    display: none;
}
}
/*==================================================
Simpleeについて　pc
===================================*/
@media screen and (min-width:1000px){
    .section--mission {
        position: relative;
      }
    
      .section--mission::before,
      .section--mission::after {
        content: '';
        position: absolute;
        width: 50%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        z-index: -1;
      }
    
      .section--mission::before {
        top: 50px;
        right: 0;
        background-image: url(../images/photo/mission_right_pc.png); 
        background-position: top right;
        background-size: 40%;
     
      } 
    
      .section--mission::after {
        bottom: 50px;
        left: 0;
        /* 左下の背景画像 */
        background-image: url(../images/photo/mission_left-pc.png); 
        background-position: bottom left;
        background-size: 30%;
      } 


    .mission.title {
        margin: 90px auto 0;
        width:530px
    }
    .mission__title br {
        display: none;
    }
    .mission__center {
        margin: 220px auto 0;
        width: 65%;
        background-color: var(--primary-orange);
        border-radius: 30px;
    }    
 
    .mission__txt br {
        display: none;
    } 
    .mission__photo {
        display: none;
    }
    .btnsub__txt {
        margin: 0 90px 0 125px;
    }
    .gg-external {
        width: 13px;
        height: 13px;
        margin-right: 29px;
        margin-top: 29px;
    }
}

@media screen and (min-width:1500px){
    .mission__center {
        max-width: 1200px;
    }
}
/*==================================================
シッターの声
===================================*/

.interview__list {
    margin: 80px auto 0;
}
.interview__item {
    width: 100%;
    border-radius: 30px;
    background: #FFF;
    padding: 70px 35px;
    margin: 0 5px;
}
.interviewIcon_icon {
    display: block;
    margin: 0 auto;
    width: 119px;
}
.interviewIcon__txt {
    text-align: center;
    font-size: 1.2rem;
    margin-top: 10px;
}
.interview__title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    margin-top: 35px;
}

.voice {
    margin-top: 20px;
}
.voice__txt {
    font-size: 14px;
    margin: 25px auto 0;
    max-width: 370px;
    letter-spacing: 0.7px;
}
.voice__txt:first-of-type {
    padding-top: 35px;
    border-top: 0.5px solid var(--primary-blue);
    margin: 0 auto;
}
.voice__txt.english {
    border-top: 0.5px solid var(--primary-green);
}
.voice__point {
    font-weight: 700;
}

/*==================================================
スライドショーの内容
===================================*/

.interview__list {
    position:relative;
	z-index: 1;
}

.interview__item-item {
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
}

/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 3;
    text-align:center;
	margin:30px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:10px;/*ドットボタンのサイズ*/
    height:10px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background: var(--primary-simpleeorange);/*ドットボタンの現在地表示の色*/
}

/*==================================================
シッターの声　pc ver
===================================*/
@media screen and (min-width:768px){
    .interview__item {
        margin: 0 100px;
    }
}

@media screen and (min-width:1000px){
    .interview__list {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        margin: 100px auto 0;
        max-width: 1080px;
    }
    .interview__item {
        max-width: 33%;
        height: 770px;
        padding: 60px 35px;
        margin: 0;
    }
    .voice__txt {
        width: 250px;
    }
}

/*==================================================
採用までの流れ　
===================================*/
/*タイムライン全体の設定*/
.timeline{
	max-width: 400px;
	width:100%;
	margin:90px auto;
	padding:0 20px;
}

.timeline li{
    /*線の起点とするためrelativeを設定*/
    position: relative;
	list-style: none;
	padding:0 0 50px 0;
}

.timeline dl{
	margin:0 0 0 30px;
}

/*絶対配置で線を設定*/
.border-line {
    /*線の位置*/
	position: absolute;
	left:29px;
	top:10;
	width:2px;/*線の太さ*/
	height:0;/*はじめは高さを0に*/
	background: #4B4B4B;
    z-index: -1;
    transition: .5s;
}
.border-line.start{
  height:100%;
}
.timeline li:last-child .border-line.start{
  height:0;
}
.time {
    background: var(--primary-black);
    width: 60px;
    height: 60px;
    padding: 15px 10px 5px;
    border-radius: 50%;
    color: var(--primary-beige);
    text-align: center;
    vertical-align: middle;
}
.timeline__item {
    display: flex;
}
.time__step {
    font-family: Montserrat;
    font-size: 1rem;
    letter-spacing: 1px;
}
.time__number {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1em;
}
.step__title {
    font-size: 1.6rem;
    margin-bottom: 5px;
}
.step__title.recruit {
    margin-top: 20px;
}
.step__txt {
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    width: 195px;
    position: relative;
}

.step__txt.entry,
.step__txt.step03 {
    margin-left: 17px;
}
.step__txt.entry::before {
    display: block;
    position:absolute;
    content: '';
    width: 2px;
    height: 2px;
    top: 8px;
    left: -11px;
    background-color: var(--primary-black);
}
.step__txt.step03::before {
    display: block;
    position:absolute;
    content: '※';
    width: 10px;
    height: 10px;
    top: 0px;
    left: -16px;
}
@media screen and (min-width:768px){
    .timeline {
        max-width: 430px;
    }
    .step__txt {
        width: 280px;
    }
    .step__txt br {
        display: none;
    }
}
/*==================================================
採用までの流れ　pc ver
===================================*/

@media screen and (min-width:1000px){

    /* 線が横に伸びる動き */

    .timeline {
        position: relative;
        display: inline-block;
        overflow: hidden;
        font-size: 24px;
        padding-bottom: 8px; /* アニメーション後のスペースを確保するために必要な値 */
    }
    
    .timeline::before {
        content: '';
        position: absolute;
        top: 45px;
        left: 0;
        width: 0; /* 最初は横線を非表示にする */
        height: 2px; /* 線の太さ */
        background-color: var(--primary-black); /* 線の色 */  
    }
    .timeline.animate-line::before{
      animation: stretchLine 3s forwards; /* アニメーションを定義 */
    }
    
    @keyframes stretchLine {
        100% {
          width: 100%; /* 100%まで線を伸ばす */
        }
      }
/* その他 */

    .timeline {
        display: flex;
        max-width: 1080px;
        margin: 100px auto 0;
        padding: 0;
        justify-content: space-between;
    }
    .timeline li {
        padding: 0;
    }
    .time {
        width: 80px;
        height: 80px;
    }
    .timeline__item {
        display: block;
    }
    .time__number {
        font-size: 2.4rem;
        line-height: 1.2em;
    }
    .timeline dl {
        margin: 20px 0 0 25px;
    }
    .step__txt {
        width: 172px;
    }
    .step__txt.step03 br{
        display: none;
    }
    .step__txt br {
        display: block;
    }
}


/*==================================================
QA　
===================================*/
.section--faq {
    margin-bottom: 100px;
}
/*
  アコーディオンそのものの横幅と余白を指定。
  開閉動作に影響なし。
*/
.qa__list {
    max-width: 500px;
    margin: 70px auto 0;
  }
  /*
    アコーディオンの2つ目以降、上に余白を取る。
    開閉動作に影響なし。
  */
  .qa__item:nth-child(n+2) {
    margin-top: 10px;
  }
  
  /*
    アコーディオンの開閉ボタンの装飾。
    position: relative;が無いと、
    「+」「-」の位置がずれるので注意。
  */
  .qa__question {
    position: relative;
    /* max-width: 500px; */
    padding: 15px 20px;
    color: var(--primary-beige);
    background: var(--primary-orange);
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    gap: 0 15px;
    font-size: 1.4rem;
    /* letter-spacing: 1.6px; */
  }
  
  /*
    アコーディオンの開閉ボタンの右側に「+」を表示。
  */
  .qa__question::after {
    content: "+";
    position: absolute;
    font-weight: 700;
    top: 14px;
    right: 18px;
  }
  
  /*
    アコーディオンが開いた際に、
    開閉ボタンの右側に「+」を「-」に変更する。
  */
  .qa__item.active .qa__question::after {
    content: "-";
    font-weight: 400;
    font-size: 2.8rem;
    line-height: 0.5em;
    right: 18px;
  }
  
  /*
    アコーディオンの閉じている部分の装飾。
    height: 0; overflow: hidden;にすることで、
    通常時は表示されないようにする。
  */
  .q__number,
  .a__number {
    font-weight: 700;
    letter-spacing: 3px;
  }
  .a__item {
    flex-direction: column;
  }
  .a__txt {
    margin-bottom: 10px;
  }
  
  .qa__answer {
    overflow: hidden;
    width: 100%;
    height: 0; /* 初期状態で非表示 */
    padding: 0 20px; /* 上下のパディングを0に */
    transition: all .5s ease;
    font-size: 1.4rem;
    letter-spacing: 1.6px;
    display: flex;
    gap: 0 15px;
    visibility: hidden; /* 追加：内容が見えないようにする */
    opacity: 0; /* 追加：内容が見えないようにする */
}
  
  /*
    アコーディオンが開いた際に、
    heightを0からautoに、paddingの上下を0から10に。
  */
  .qa__item.active .qa__answer {
    height: auto;
    padding: 20px; /* 上下のパディングを調整 */
    visibility: visible; /* 追加：内容を見えるようにする */
    opacity: 1; /* 追加：内容を見えるようにする */
}

  .qa__subtxt {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-align: center;
    margin-top: 50px;
  }

  /*==================================================
QA　pc var
===================================*/

@media screen and (min-width:824px){
    .section--faq {
        margin-bottom: 120px;
    }
    .qa__list {
        max-width: 800px;
        margin: 100px auto 0;
      }
    
      .qa__item:nth-child(n+2) {
        margin-top: 20px;
    }
    .qa__question,
    .qa__answer,
    .qa__subtxt {
        font-size: 1.6rem;
        letter-spacing: 0.1em;
    }
    .qa__question,
    .qa__answer {
        gap: 0 30px;
    }
    .qa__item.active .qa__answer {
        padding: 20px;
    }
    .qa__item.active .qa__question::after {
        display: none;
    }
    .qa__subtxt {
        margin-top: 100px;
    }
    .a__txt {
        margin-bottom: 0;
      }
}

/*==================================================
footer
===================================*/
.footer {
    background-image: url(../images/photo/footer_sp.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 35px var(--contentPadding);
}

/* topへ戻る */
#page_top{
    width: 50px;
    height: 50px;
    position: fixed;
    right: 10px;
    bottom: 30px;
    /* opacity: 0.8; */
    background-color: var(--primary-simpleeorange);
    border-radius: 50%;
    z-index: 100;
  }
  #page_top a{
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
  }
  #page_top a::before{
    font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
    color: var(--primary-beige);
    position: absolute;
    width: 15px;
    height: 15px;
    top: -23px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
  }


.btn footer {
    margin-top: 40px;
   }
.btn__contact,
.btn__media {
    background: rgba(255, 255, 255, 0.70);
}


.btn__media {
    line-height: 1em; /* ボタンの高さの半分 */
    text-decoration: none;
    display: block;
    padding-top: 15px;

  }
  
  .btn__mediatxt {
    font-size: 1rem;
    font-size: 1.2rem; /* （メディアの方へ）の文字サイズ */
    margin-top: -18px; /* （メディアの方へ）の上部のマージン（適宜調整） */
    line-height: 0.7em;

  }

.footer_menu {
    margin-top: 100px;
}
.footer__list {
    margin-top: 15px;
    margin-left: 5px;
}
.footer__item {
    color: var(--primary-white);
    opacity: 0.7;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    margin-top: 5px;
}
.copyright {
    text-align: center;
    color: var(--primary-white);
    opacity: 0.7;
    font-size: 1.4rem;
    letter-spacing: 1.2px;
    margin-top: 50px;
}

/*==================================================
footer　pc ver
===================================*/
@media screen and (min-width:769px){
    #page_top{
        width: 70px;
        height: 70px;        
      }
      #page_top a{
        width: 70px;
        height: 70px;
       
      }

    .btn__mediatxt {
        font-size: 1.2rem; 
        margin-top: -18px; 
    }
    .footer {
        background-image: url(../images/photo/footer_pc.png);
    }
    .footer__list {
        margin-top: 20px;
    }
    
    .footer_menu {
        margin-top: 70px;
    }

}