@charset "UTF-8";
/****************************************
          $breakpoint
*****************************************/
/****************************************
          GENERAL SETTING
*****************************************/
#globalContents {
  padding-bottom: 0; }

.contentsWrap {
  font-family: "Times New Roman", serif;
  letter-spacing: 0.07rem;
}
.contentsWrap {
  /* パソコンで見たときは"pc"のclassがついた画像が表示される */
  /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ }
  .contentsWrap section {
    display: block;
    margin-top: 0; }
  .contentsWrap *,
  .contentsWrap *:after,
  .contentsWrap *:before {
    box-sizing: border-box; }
 @media screen and (max-width: 768px) {
    .contentsWrap .only-pc {
      display: none !important; } }
  @media screen and (min-width: 769px) {
    .contentsWrap .only-sp {
      display: none !important; } }

    @media only screen and (max-width: 768px) {
        #contentsContainer {
            padding: 75px 0 0;
        }
    }

    .contentsWrap .kv{
      width: 100%;
      text-align: center;
      margin: 0 and;
    }
    .contentsWrap section.inner{
      width: 100%;
      text-align: center;
      margin: 0 auto;
      max-width: 980px;
    }
    .contentsWrap section.inner div{
      text-align: left;
      padding: 30px 0;
    }
    @media only screen and (max-width: 980px) {
      .contentsWrap section.inner div{
        padding: 30px 15px;
      }
    }
    .contentsWrap section.inner div.copyArea{
      text-align: center;
    }
    .contentsWrap section h3{
      font-size: 24px;
      color: #444;
      margin-bottom: 20px;
      line-height: 1.6;
    }
    .bgArea .imgBoxArea .txtArea h4.ttl03{
      font-size: 30px;
      color: #444;
      margin-bottom: 40px;
    }
    .contentsWrap section p.copyTxt{
      font-size: 27px;
      margin-bottom: 30px;
      line-height: 1.8;
    }
    .contentsWrap section p.txt{
      font-size: 20px;
      margin-bottom: 20px;
      line-height: 1.8;
    }
    .contentsWrap section figure.picImg{
      max-width: 480px;
      margin: 15px auto;
    }
    .contentsWrap section.inner div.copyArea h3,
    .contentsWrap section.inner div.copyArea p,
    .contentsWrap section.inner p a.btn,
    .contentsWrap section .imgBoxArea p a.btn,
    .bgArea .imgBoxArea .txtArea h4.ttl03{
      line-height: 2 !important;
    }
    @media only screen and (max-width: 768px) {
      .contentsWrap section h3{
        font-size: 22px;
        line-height: 1.6;
      }
      .bgArea .imgBoxArea .txtArea h4.ttl03{
        font-size: 20px;
      }
      .contentsWrap section p.copyTxt{
        font-size: 18px;
        line-height: 1.6;
      }
      .contentsWrap section p.txt{
        font-size: 18px;
        line-height: 1.6;
      }
      .contentsWrap section figure.picImg{
        width: 70%;
        max-width: 300px;
      }
      .contentsWrap section.inner div.copyArea h3,
      .contentsWrap section.inner div.copyArea p{
        line-height: 1.7 !important;
      }
    }


    .contentsWrap section.inner h4{
      text-align: center;
      margin: 30px auto;
      font-size: 32px;
    }
    .linksBlock h4{
      text-align: center;
      margin: 0 auto 30px;
      font-size: 26px;
    }
    .contentsWrap section.inner h4.ttl,
    .linksBlock h4.ttl{
      margin-bottom: 60px;
    }

	/*
    .contentsWrap section.inner h4.ttl:after,
      .linksBlock h4.ttl:after{
      content: "";
      display: block;
      width: 65px;
      height: 2px;
      background: #BABABA;
      position: absolute;
      margin-top: 15px;
      margin-left: calc(50% - 32.5px);
    }
	*/

    @media only screen and (max-width: 768px) {
      .contentsWrap section.inner h4{
        margin: 20px auto;
        font-size: 20px;
      }
      .contentsWrap section.inner h4.ttl,
      .linksBlock h4.ttl{
        margin-bottom: 30px;
      }
      .contentsWrap section.inner h4.ttl:after,
      .linksBlock h4.ttl:after{
        margin-top: 5px;
        margin-left: calc(50% - 48px);
      }
    }

    /* thumLinks */
    .thumLinksArea{
      display : flex;
      flex-wrap : wrap;
      justify-content:space-between;
      padding-bottom: 30px;
    }
    .thumLinksArea::before{
      content:"";
      display: block;
      width:22.5%;
      order:1;
    }
    .thumLinksArea::after{
      content:"";
      display: block;
      width:22.5%;
    }
    .thumLinksArea li{
      margin-bottom:30px;
      box-sizing:border-box;
      width:22.5%;
	  font-size:18px;
    }
@media only screen and (max-width: 768px) {
    .thumLinksArea li{
	  font-size:15px;
    }
}
    .thumLinksArea li .thumImg{
      margin-bottom: 10px;
      width: 100%;
      overflow:hidden;
      border-radius: 7px;
      border: 1px solid #C9D6DF;
    }
    .thumLinksArea li a{
      text-decoration: none;
      color: #444;
    }
    .thumLinksArea li a:hover .thumImg img{
      transform:scale(1.15);
      opacity: 0.7;
    }
    .thumLinksArea li a span,
    .linksArea li a{
      padding-left: 20px;
      background: url(../img/icon_arrow.webp) no-repeat 0 6px;
      background-size: 8px auto;
      transition: all 0.2s;
      display: inline-block;
    }
    .thumLinksArea li a:hover span,
    .linksArea li a:hover{
      background-position: 5px 6px;
    }
    @media only screen and (max-width: 768px) {
      .thumLinksArea{
        padding-bottom: 20px;
      }
      .thumLinksArea li{
        margin-bottom:20px;
        width:48%;

      }
      .thumLinksArea::before,
      .thumLinksArea::after{
        width: 48%;
      }
      .thumLinksArea li a span,
      .linksArea li a{
        padding-left: 15px;
      }
    }

    .bgArea{
      width: 100%;
      margin: 0 auto;
      text-align: center;
      padding: 60px 0;
      background: url(../img/bg_color.webp) no-repeat 50% 0;
      background-size: cover;
    }
    .bgArea .imgBoxArea{
      max-width: 980px;
      margin: 0 auto;
      text-align: left;
    }
    .bgArea .imgBoxArea .txtArea h3.ttl02,
    .inner .imgBoxArea .txtArea h3.ttl02,
    .bgArea .imgBoxArea .txtArea h4.ttl03{
      font-family: "Shippori Mincho", serif;
      font-weight: 400;
      font-style: normal;
    }
	.bgArea .imgBoxArea .txtArea h3.ttl02.line,
    .inner .imgBoxArea .txtArea h3.ttl02.line,
    .bgArea .imgBoxArea .txtArea h4.ttl03.line{
      border-top: 2px solid #CCC9B0;
      border-bottom: 2px solid #CCC9B0;
       padding: 10px 0;
    }
    .bgArea .imgBoxArea .txtArea h4.ttl03{
      max-width: 600px;
      width: 65vw;
      margin: 0 auto 40px;
      font-size: 24px;
    }
    .bgArea .imgBoxArea .txtArea p.txt{
      line-height: 1.8;
    }
    @media only screen and (max-width: 980px) {
      .bgArea{
        padding: 30px 15px;
      }
      .lower .imgBoxArea .txtArea p.txt{
        margin-bottom: 0;
      }
      }
    @media only screen and (max-width: 768px) {
      .bgArea .imgBoxArea{
        text-align: center;
      }
.bgArea .imgBoxArea .txtArea h4.ttl03{
      width: 100%;
      font-size: 20px;
    }
    }
    .imgBoxArea+.imgBoxArea{
      margin-top: 50px;
      padding-top: 50px;
      border-top: 1px solid #BABABA;
    }
    .imgBoxArea.center+.imgBoxArea{
      padding-top: 0;
      margin-top: 30px;
      border-top: none;
    }
    @media only screen and (max-width: 768px) {
      .imgBoxArea+.imgBoxArea{
        margin-top: 25px;
        padding-top: 30px;
      }
    }
    .imgBoxArea:nth-child(even){
      display: flex;
      column-gap: 35px;
      flex-direction: row-reverse; /*左右入れ替え*/
       }
    .imgBoxArea:nth-child(odd){
      display: flex;
      column-gap: 35px;
       }
    @media only screen and (max-width: 768px) {
      .imgBoxArea:nth-child(even),
      .imgBoxArea:nth-child(odd){
       display: block;
       }
      }
      .imgBoxArea figure{
        border-radius: 10px;
        width: 58vw;
        max-width: 480px;
        overflow: hidden;
      }
      .lower .imgBoxArea figure{
        width: 90vw;
        max-width: 620px;
        min-width: 320px;
      }
      @media only screen and (max-width: 768px) {
        .imgBoxArea figure{
          text-align: center;
          margin: 0 auto 30px;
        }
        .lower .imgBoxArea figure{
          width: 60vw;
          max-width: 320px;
          min-width: 240px;
        }
      }

    /* btn */
    .contentsWrap p a.btn{
      background: #fff;
      display:  inline-block;
      border: 1px solid #BABABA;
      font-size: 18px;
      padding: 12px 60px 12px 80px;
      color: #444;
      border-radius: 60px;
      overflow: hidden;
      position: relative;
      z-index: 1;
      }
      .contentsWrap p a.btn span.mov:before{
        display: block;
        content: "";
        width: 20px;
        height: 20px;
        background: url(../img/icon_mov_play.webp) no-repeat 0 0;
        background-size: 20px;
        position: absolute;
        margin-left: -45px;
        margin-top: 5px;
      }
      .contentsWrap p a.btn{
        padding-left: 70px;
        padding-right: 50px;
      }
      .contentsWrap .imgBoxArea p a.btn{
        padding: 7px 50px 7px 60px;
        font-size: 16px;
        margin-top: 5px;
      }
      .contentsWrap p a.btn.toTop{
        font-size: 18px;
        padding-left: 50px;
        padding-right: 30px;
        margin-bottom: 30px;
      }
@media only screen and (max-width: 768px) {
      .contentsWrap p a.btn.toTop{
        font-size: 15px;
      }
}
      .links+p a.btn.toTop{
        font-size: 18px;
        padding-left: 50px;
        padding-right: 30px;
        text-decoration: none;
        margin-bottom: 0;
      }
      .contentsWrap p a.btn span:before{
        display: block;
        content: "";
        width: 10px;
        height: 15px;
        background: url(../img/icon_arrow.webp) no-repeat 0 0;
        background-size: 10px auto;
        position: absolute;
        margin-left: -38px;
        margin-top: 10px;
      }
      .contentsWrap p a.btn.toTop span:before{
          margin-left: -25px;
          margin-top: 7px;
        }
      .contentsWrap .links+p a.btn.toTop span:before{
          margin-left: -25px;
          margin-top: 5px;
        }             
      .contentsWrap .imgBoxArea p a.btn span:before{
        margin-left: -30px;
          margin-top: 8px;
      }
      .contentsWrap section.inner p a.btn,
      .contentsWrap section .imgBoxArea p a.btn{
        text-decoration: none;
      }
      .contentsWrap section.inner p.btnArea{
        margin-top: 30px;
      }
      .contentsWrap p a.btn:after {
        background: #cce7e6;
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 100%;
        transform: scale(0, 1);
        transform-origin: left top;
        transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
        z-index: -1;
      }
      .contentsWrap p a.btn:hover{
        border-color: #33a19b;
        color: #33a19b;
      }
      .contentsWrap p a.btn:hover::after {
        transform: scale(1, 1);
      } 
      @media only screen and (max-width: 768px) {    
        .contentsWrap p a.btn{
          font-size: 3.2vw;
          padding: 2vw 10vw 2vw 13vw;
        }
        .contentsWrap p a.btn{
          padding-left: 10vw;
          padding-right: 8vw;
        }
        .contentsWrap p a.btn.toTop{
          font-size: 2.7vw;
          padding-left: 8vw;
          padding-right: 4vw;
        }
        .contentsWrap p a.btn span.mov:before{
          background:url(../img/icon_mov_play.webp) no-repeat 0 0;
          background-size: 4vw;
          width: 4vw;
          height: 4vw;
          margin-left: -7vw;
          margin-top: 0.55vw;
        }
        .contentsWrap p a.btn span:before{
          background: url(../img/icon_arrow.webp) no-repeat 0 0;
          background-size: 1.5vw auto;
          width: 1.5vw;
          height: 2.4vw;
          margin-left: -5vw;
          margin-top: 2vw;
        }
        .contentsWrap p a.btn.toTop span:before{
          margin-left: -3.5vw;
          margin-top: 1.5vw;
        }
        .contentsWrap .links+p a.btn.toTop span:before{
          margin-left: -15px;
          margin-top: 5px;
        }             
      }

    /* Top */
    #sy_top .kv{
      background: url(../img/kv_sampoyoshi.webp) no-repeat 50% 0;
      background-size: 100% auto;
      height: 37.81vw;
      padding: 2vw;
    }
    #sy_top .kv h1{
      font-size: 2.5vw;
      color: #444;
    }
	/*
    #sy_top .kv h1:after{
      content: "";
      display: block;
      width: 65px;
      height: 2px;
      background: #BABABA;
      position: absolute;
      margin-top: 0;
      margin-left: calc(50% - 52px);
    }
	*/
    #sy_top .kv p{
      margin-top: 21vw;
    }
    @media only screen and (max-width: 768px) {
        #sy_top .kv h1{
          font-size: 4.4vw;
        }
        #sy_top .kv{
          background: url(../img/kv_sampoyoshi.webp) no-repeat 50% 0;
          background-size: auto 56vw;
          height: 56vw;
          padding: 4vw;
        }
        #sy_top .kv p{
          margin-top: 23vw;
        }
    }
    #sy_top .bgArea{
      background: url(../img/bg_top_main.webp) no-repeat 50% 0;
      background-size: cover;
    }

    /* lower */
    .lower .kv{
      background: url(../img/bg_color.webp) no-repeat 50% 0;
      background-size: 100% auto;
      height: 20.78vw;
      padding: 2vw;
    }
    #outlook .kv{
      background: url(../img/kv_outlook.webp) no-repeat 50% 0;
      background-size: 100% auto;
    }
    #roots .kv{
      background: url(../img/kv_roots.webp) no-repeat 50% 0;
      background-size: 100% auto;
    }
    .lower .kv h1{
      font-size: 3.4vw;
      color: #444;
      font-family: "Shippori Mincho", serif;
      font-weight: 400;
      font-style: normal;
    }
    #outlook .kv h1{
      color: #5A7983;
      line-height: 1.4;
    }
    #roots .kv h1{
      color: #81807F;
      line-height: 1.4;
    }
    .lower .kv h2{
      font-size: 2vw;
      margin-bottom: 20px;
      padding-bottom: 20px;
    }
    @media only screen and (max-width: 980px) {
      .lower .kv h2{
      margin-bottom: 2vw;
      padding-bottom: 2vw;
      } 
    } 

	/*
    .lower .kv h2:after{
      content: "";
      display: block;
      width: 65px;
      height: 2px;
      background: #BABABA;
      position: absolute;
      margin-top: 15px;
      margin-left: calc(50% - 72px);
    }
	*/
	
    @media only screen and (max-width: 768px) {
        .lower .kv h1{
          font-size: 5.4vw;
        }
        .lower .kv{
          height: 42vw;
          padding: 4vw;
        }
        #roots .kv{
          background: url(../img/kv_roots.webp) no-repeat 50% 0;
          background-size: auto 42vw;
        }
        #outlook .kv{
          background: url(../img/kv_outlook.webp) no-repeat 50% 0;
          background-size: auto 42vw;
        }
        .lower .kv h2{
          font-size: 15px;
          margin-bottom: 1.8vw;
          padding-bottom: 1.8vw;
        }
        .lower .kv h2:after{
          margin-top: 7px;
          margin-left: calc(50% - 51px);
        }
    }
    .lower .copyArea h3{
      font-size: 2vw;
      color: #444;
      font-family: "Shippori Mincho", serif;
      line-height: 2;
      font-weight: 400;
      font-style: normal;
      margin-bottom: 20px;
      padding-bottom: 20px;
      margin-top: 15px;
    }

	/*
    .lower .copyArea h3:after{
      content: "";
      display: block;
      width: 65px;
      height: 2px;
      background: #BABABA;
      position: absolute;
      margin-top: 15px;
      margin-left: calc(50% - 34px);
    }
	*/

    .lower.contentsWrap section.inner .copyArea h4{
      font-size: 1.8vw;
      color: #444;
      line-height: 2;
      margin-bottom: 15px;
    }
    @media only screen and (max-width: 980px) {
      .lower .copyArea h3{
        font-size: 30px;
      }
      .lower.contentsWrap section.inner .copyArea h4{
        font-size: 24px;
      }
    }
    @media only screen and (max-width: 768px) {
      .lower .copyArea h3{
        font-size: 24px;
        margin-top: 0;
      }
      .lower.contentsWrap section.inner .copyArea h4{
        font-size: 18px;
        margin-bottom: 0;
      }
    }
    .lower.contentsWrap section.inner .imgBoxArea{
      padding-top: 50px;
      padding-bottom: 50px;
    }
    .lower.contentsWrap section.inner .imgBoxArea .picImg01{
      width: 320px;
      min-width: 240px;
    }
     .lower.contentsWrap section.inner .imgBoxArea .picImg02{
      width: 240px;
      max-width: 240px;
      min-width: 240px;
      height: 240px;
    }
    .lower.contentsWrap section.inner .imgBoxArea .txtArea{
      padding-top: 0;
    }
    .lower.contentsWrap section.inner .imgBoxArea.light .picImg01 img{
      width: 100%;
    }
    .lower.contentsWrap section.inner .imgBoxArea.light{
      flex-direction: row-reverse; /*左右入れ替え*/
       }
    @media only screen and (max-width: 768px) {
      .lower.contentsWrap section.inner .imgBoxArea.light{
       display: block;
       }
       .lower.contentsWrap section.inner .imgBoxArea .picImg01{
          width: 50%;
          min-width: auto;
          margin-bottom: 15px;
        }
        .lower.contentsWrap section.inner .imgBoxArea .picImg02{
        width: 200px;
        max-width: 200px;
        min-width: 200px;
        height: 200px;
      }
        .lower.contentsWrap section.inner .imgBoxArea{
          padding-top: 30px;
          padding-bottom: 30px;
        }
      }
      .lower.contentsWrap .imgBoxArea.center div.txtArea{
        text-align: center;
      }
      .lower.contentsWrap .imgBoxArea.center div.txtArea .ttl02{
        margin-bottom: 50px;
      }

		/*
      .lower.contentsWrap .imgBoxArea.center div.txtArea .ttl02:after{
        content: "";
        display: block;
        width: 65px;
        height: 2px;
        background: #BABABA;
        position: absolute;
        margin-top: 15px;
        margin-left: 32%;
    }
	*/

     @media only screen and (max-width: 980px) {
       .lower.contentsWrap .imgBoxArea.center div.txtArea .ttl02:after{
        margin-left: calc(50vw - 8vw);
       }
     }
     @media only screen and (max-width: 768px) {
      .lower.contentsWrap .imgBoxArea.center div.txtArea .ttl02:after{
        margin-left: calc(50vw - 47px);
       }
     }
    .lower.contentsWrap .imgBoxArea.center.unit div.txtArea .ttl02:after{
        margin-left: calc(25vw + 65px);
      }
    .imgBoxArea.center+.imgBoxArea.left{
      flex-direction: initial;
      width: 80%;
      max-width: 800px;
    }
     .imgBoxArea.center+.imgBoxArea.left .photoImg01{
      width: 60vw;
      min-width: auto;
      max-width: 240px;
     }
    .imgBoxArea .txtArea h5, .imgBoxArea.center+.imgBoxArea.left h5 {
    margin-top: 2Opx;
    padding-top: 0;
    font-weight: block;
    font-size: 20px;
    margin-bottom: 15px;
}
     .txtList li{
      margin-bottom: 15px;
      padding-left: 20px;
      font-size: 18px;
     }
     .txtList li:before{
      position: absolute;
      content: "■";
      color: #CCC9B0;
      margin-left: -18px;
     }
     @media only screen and (max-width: 768px) {
      .imgBoxArea.center+.imgBoxArea.left{
        width: 100%;
      }
      .imgBoxArea.center+.imgBoxArea.left .photoImg01{
        width: 50vw;
        min-width: auto;
        max-width: 240px;
       }
      .txtList{
        text-align: left;
      }
      .txtList li{
        margin-bottom: 10px;
       }
     }
     .imgBoxArea.center:nth-child(odd){
       display: block;
       width: 100%;
       }
       .imgBoxArea.center:nth-child(odd) p{
        line-height: 2.4;
       }
       .lower.contentsWrap .imgBoxArea.center.unit:nth-child(odd) div.txtArea .ttl02{
        margin-bottom: 20px;
        margin-top: 50px;
       }
		
	/*
       .imgBoxArea.center.unit:nth-child(odd) .ttl02:before{
        content: "";
        display: block;
        width: 65px;
        height: 2px;
        background: #BABABA;
        position: absolute;
        margin-top: -50px;
        margin-left: calc(50% - 32.5px);
      }
	*/

      .inner .imgBoxArea.center:nth-child(odd) .txtArea h3.ttl02:after{
        display: none;
      }
      .movie{
        text-align: center;
        margin: 0 auto;
        width: 100%;
        aspect-ratio: 16/10;
        max-width: 800px;
      }
      .movie iframe{
        width: 100%;
        height: 100%;
      }
      .inner.movArea h5{
        margin-top: 50px;
        font-weight: block;
      font-size: 28px;
      }
      @media only screen and (max-width: 768px) {
        .movie iframe{
          width: calc(100vw - 30px);
          height: calc(56.25vw - 30px);
        }
        .inner.movArea h5{
          margin-top: 20px;
          font-size: 20px;
        }
        .movie{
          paddint-top: 0;
        }
        .movie+p{
          text-align: left;
          padding: 0 15px;
        }
        .lower.contentsWrap .imgBoxArea.center:nth-child(odd) div.txtArea .ttl02{
          margin-top: 10px;
        }

	/*
        .inner .imgBoxArea.center:nth-child(odd) .txtArea h3.ttl02:before{
          content: "";
          display: block;
          width: 65px;
          height: 2px;
          background: #BABABA;
          position: absolute;
          margin-top: -30px;
          margin-left: calc(50% - 65px);
        }
	*/

      }
      .lower .links{
        max-width: 980px;
        width: 100%;
        margin: 0 auto;
        display: flex;
      }
      .lower .links .boxLinksArea{
        display: flex;
        flex-wrap : wrap;
        justify-content:space-between;
        padding-bottom: 30px;
        align-items:flex-start
      }
      .lower .links .boxLinksArea::before{
        content:"";
        display: block;
        width:50%;
        order:1;
      }
      .lower .links .boxLinksArea::after{
        content:"";
        display: block;
        width:50%;
      }
      .lower .links .boxLinksArea li{
        margin-bottom:0;
        box-sizing:border-box;
        width:50%;
        font-size: 18px;
      }
      .lower .links .boxLinksArea li a{
        display: flex;
        align-items: center;
        text-align: left;
        vertical-align: middle;
        height: 120px;
      }
      .lower .links .boxLinksArea li a .thumImg{
        width: 150px;
        min-width: 150px;
        height: auto;
        margin: 10px;
        border-radius: 5px;
        border: 1px solid #C9D6DF;
        overflow: hidden;
      }
      .lower .links .boxLinksArea li a:hover{
        border-color: #33a19b;
        color: #33a19b;
      }
      .lower .links .boxLinksArea li a:hover .thumImg img{
        transform:scale(1.15);
        opacity: 0.7;
      } 
      .lower .links .boxLinksArea li a{
        text-decoration: none;
        color: #444;
      }
      .lower .links .boxLinksArea li a span {
        padding-left: 18px;
        background: url(../img/icon_arrow.webp) no-repeat 2px 7px;
        background-size: 8px auto;
        transition: all 0.2s;
        padding-right: 10px;
    }
    .lower .links .boxLinksArea li a:hover span{
      background-position: 7px 7px;
    } 
    .lower .links .thumLinksArea {
      width: 60%;
      padding-left: 25px;
    }
    .lower .links .thumLinksArea li {
      width: 100%;
    }
    .lower .links .thumLinksArea li a span{
        font-size: 18px;
    }
    @media only screen and (max-width: 980px) {
      .lower .links{
        display: block;
      }
      .lower .links .thumLinksArea{
        max-width: 240px;
        width: 65%;
        margin: 15px auto 0;
        padding-left: 0;
      }
    }
    @media only screen and (max-width: 768px) {
      .lower .links .boxLinksArea li a{
        display: inline-block;
        height: auto;
        padding-bottom: 10px;
      }
      .lower .links .boxLinksArea li a .thumImg{
        margin: 10px auto;
        width: calc(100% - 20px);
      }
      .lower .links .boxLinksArea li a span {
        background: url(../img/icon_arrow.webp) no-repeat 7px 4px;
        background-size: 8px auto;
        padding: 0 15px 0 20px;
        display: inline-block;
        font-size: 15px;
      }
    }
    .lower.contentsWrap section.inner .imgBoxArea.light.mb0,
    .lower.contentsWrap section.inner .imgBoxArea.light.mb0 .txtArea {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .txt.left{
      text-align: left;
    }
    #roots .bgImg{
      background: url(../img/img_roots04.webp) no-repeat 7vw 50px,url(../img/photo_roots03.webp) no-repeat calc(100% - 8vw) 50px,url(../img/bg_top_main.webp) no-repeat 50% 0;
      background-size: 15vw auto ,15vw auto, cover;
    }
    @media only screen and (max-width: 1080px) {
      #roots .bgImg{
        background: url(../img/img_roots04.webp) no-repeat 2vw 40px,url(../img/photo_roots03.webp) no-repeat calc(100% - 3vw) 40px,url(../img/bg_top_main.webp) no-repeat 50% 0;
        background-size: 15vw auto ,15vw auto, cover;
      }
      .bgArea .imgBoxArea .txtArea h4.ttl03{
        font-size: 24px;
      }
    }
    @media only screen and (max-width: 768px) {
      #roots .bgImg{
        background: url(../img/bg_top_main.webp) no-repeat 50% 0;
        background-size: cover;
      }
      .bgArea .imgBoxArea .txtArea h4.ttl03{
        font-size: 20px;
      }
      .photoImg03{
        margin-bottom: 20px;
      }
      .photoImg03 img{
        max-width: 270px;
        width: 65vw;
        margin: 0 20px 20px;
      }
      .photoImg04 img{
        width: 65vw;
        margin: 20px 20px 0;
        max-width: 270px;
      }
    }
    .cml2AreaBlock{
      display: flex !important;
      display : flex;
      flex-wrap : wrap;
      justify-content:space-between;
      padding: 30px 0;
    }
    .cml2AreaBlock .cml2Area{
      box-sizing:border-box;
      width:48%;
      column-gap: 4%;
      text-align: center;
    }
    .cml2AreaBlock .cml2Area ul{
        max-width: 420px;
        margin: 0 auto;
      }
    .cml2AreaBlock .cml2Area h3.ttl02{
      text-align: center;
      margin: 0 auto 20px;
      font-size: 24px;
      color: #444;
      font-family: "Shippori Mincho", serif;
      line-height: 1.5;
      font-weight: 400;
      font-style: normal;
    }
    .cml2AreaBlock .cml2Area .picImg{
      width: 256px;
      margin: 20px auto 0;
    }
    @media only screen and (max-width: 980px) {
      .cml2AreaBlock .cml2Area h3.ttl02{
        font-size: 20px;
      }
    }
    @media only screen and (max-width: 768px) {
      .cml2AreaBlock{
        display: block !important;
        padding: 0;
      }
      .cml2AreaBlock .cml2Area{
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
      }
      .cml2AreaBlock .cml2Area .picImg{
        width: 214px;
      }
      .contentsWrap section.inner div.cml2Area+div.cml2Area{
        padding-top: 5px;
      }
    }
    @media only screen and (min-width: 769px) {
    .shareIconWrap{
      padding-right: 85px;
    }
  }
  .contentsWrap section.inner.mb0{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .contentsWrap section.inner.mb0 p a.btn.toTop{
    margin-top: 15px !important;
    margin-bottom: 10px !important;
  }
#sy_top .bgArea .txtArea ul.txtList {
margin-bottom: 25px;
}
#sy_top .bgArea .txtArea ul.txtList li {
font-size: 18px;
}
@media only screen and (max-width: 768px) {
#sy_top .bgArea .txtArea ul.txtList li {
font-size: 15px;
}
}
.contentsWrap section.inner.bgBox{
	background:#fff;
    border: 1px solid #BABABA;
	border-radius:10px;
	margin-top:35px;
	padding:15px;
}
.boxArea{
    background: #fafafa;
    border: 1px solid #bababa;
    display: inline-block;
    padding: 15px 20px 20px;
    border-radius: 5px;
	font-size:24px;
}
@media only screen and (max-width: 768px) {
.boxArea{
font-size: 18px;
}
}