@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/*Webフォントの読み込み*/
@font-face {
 font-family: 'keifont';
 src: url( "fonts/keifont.ttf") format('truetype');
 font-weight: normal;
 font-style: normal;
/* 	font-display:swap */
}
/* BIZ UDPGothic normal */
@font-face {
 font-family: 'BIZ UDPGothic';
 src: url( "fonts/BIZUDPGothic-Regular.ttf") format('truetype');
 font-weight: normal;
 font-style: normal;
	font-display:swap
}
/* BIZ UDPGothic bold */
@font-face {
 font-family: 'BIZ UDPGothic-bold';
 src: url( "fonts/BIZUDPGothic-Bold.ttf") format('truetype');
 font-weight: bold;
 font-style: normal;
	font-display:swap
}

/* .feifont {
	 font-family: "BIZ feifont", sans-serif;
	font-weight: 400;
  font-style: normal;
} */

.keifont {
font-family: 'keifont', sans-serif;
font-weight: normal;
 font-style: normal;
}


img {
    width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}



.kv_img {
    mask-image: url(./img/sp_kv.svg);
    -webkit-mask-image: url(./img/sp_kv.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    overflow: hidden;
    aspect-ratio: 1079 / 1511;
    position: relative;
}


.kv_main {
    position: relative;
}

.kv-text  {
  position: absolute;
      top:-7.189024vw;
    left: 4vw;
  width:   calc( 632.68 / 1179  * 100%);
}



.kv-text h2{
    padding-top: calc( 265.3 / 632.68 * 100%);
    /* padding-top: calc( 632.68 / 265.3 * 100%); */
    background-image: url(./img/main-ttl.webp);
    text-indent: -9999px;
    display: block;
    height: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
  
}


.subttl-cmn {
  color: #DD5C36;
  font-size: 1.2rem;
  font-weight: 600;
}
.mod-cmn-ttl-01 .ttl-cmn{
  /* padding-top: calc( 805.7 / 109.18 * 100%); */
  
    /* background-image: url(./img/ttl-01.svg); */
    text-indent: -9999px;
    display: block;
    height: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
     
}

.about  .ttl-cmn{
  background-image: url(./img/ttl-01.svg);
  padding-top: calc( 109.18 / 805.7 * 100%);
  width:80%;
  max-width: 410px;
}

.sec_work .ttl-cmn{
  background-image: url(./img/ttl-02.svg);
  padding-top: calc( 131.2 / 679.03 * 100%);
  width:80%;
  max-width: 394px;
}
.sec_produce .ttl-cmn{
  background-image: url(./img/ttl-03.svg);
  padding-top: calc( 132.09/ 817.26 * 100%);
  width:65%;
      max-width: 400px;
}
.sec_news .ttl-cmn{
  background-image: url(./img/ttl-04.svg);
  padding-top: calc( 50.4/ 400.6 * 100%);
  width:36%;
}

.sec_news {
	padding-top:60px;
}
.sec_contact .ttl-cmn{
  background-image: url(./img/ttl-contact.svg);
  padding-top: calc( 93.4/ 584 * 100%);
  width:50%;
  max-width: 250px;
}

.contact .ttl-cmn{
  background-image: url(./img/ttl-contact.svg);
  padding-top: calc( 93.4/ 584 * 100%);
  width:70%;
}
.mod-members .ttl-cmn{
  background-image: url(./img/ttl-members.svg);
  padding-top: calc( 112.4/ 702 * 100%);
  width:80%;
}

.sns-list .ttl-cmn {
   background-image: url(./img/ttl-snslist.svg);
  padding-top: calc( 180.06/ 286.02 * 100%);
  /* padding-top: calc( 286.02/ 180.06 * 100%); */
}

.sns-list .mod-cmn-ttl-01 {
  width: 160px;
}
.mod-cmn-ttl-02 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.text-cmn-bubble { 
	background: url(./img/about_text-01.svg);
	position: relative;
    width: 100%;
    /* aspect-ratio: 1050.1 / 1582.62; */
    /* aspect-ratio: 1582.2 / 1075; */
	background-repeat: no-repeat;
	background-size: contain;
}

.text-color-01 {
	color: #DD5C36;
}
.text-bubble-01 {
	 aspect-ratio: 1050.1 / 1582.62;
   margin-top: 30px;
}

.text-cmn-bubble-in {
    position: absolute;
    top: 5%;
    left: 9%;
    width: 80%;
    /* aspect-ratio: 846.2 / 1353.5; */
    font-size: 0.95rem;
        line-height: 2.2rem;
    font-weight: 600;
}

.text-bubble-in-01 {
	 aspect-ratio: 846.2 / 1353.5;
}

.text-cmn-bubble.text-bubble-02{
	background: url(./img/about_text-02.svg); 
	 aspect-ratio: 1074.7/ 914.02;
	 /* aspect-ratio: 914.02/ 1074.7; */
	 background-repeat: no-repeat;
    background-size: contain;
}

.text-bubble-in-02 {
	 aspect-ratio: 861.8/ 565.2;
	top: 27%;		
}

.text-cmn-bubble.text-bubble-03{
	background: url(./img/about_text-03.svg); 
	 aspect-ratio: 1074.8/ 690.52;
	 /* aspect-ratio: 914.02/ 1074.7; */
	 background-repeat: no-repeat;
    background-size: contain;
}

.text-bubble-in-03 {
	 aspect-ratio: 858.1/ 356.4;
	top: 31%;		
}

.text-cmn-bubble.text-bubble-04{
	background: url(./img/about_text-04.svg); 
	 aspect-ratio: 1074.8/ 678.12;
	 /* aspect-ratio: 914.02/ 1074.7; */
	 background-repeat: no-repeat;
    background-size: contain;
}

.text-bubble-in-04 {
	 aspect-ratio: 844.9/ 413.2;
	top: 24%;		
}

.about {
  margin-top: 40px;
}

.about .about-bg {
  margin: 35px auto 18px;
    width: 99%;
}

.media-flex {
  margin-top: 61px;
}

.instagram-list {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: calc(290 / 750 * 1vw * 100);
    grid-gap: calc(10 / 750 * 1vw * 100);
    display: grid;
}

.instagram-list li {
  border-radius: 10px;
 position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

.instagram-list a {
  display: inline-block;
   width: 100%;
  height: 100%;
}
.instagram-list img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec_work {
  padding-top: 55px;
}

.produce-list {
margin-top:30px;
}
.sec_produce {
	padding-top:40px;
}


.produce-list .p-postList__title {
    font-size: 0.9rem;
    line-height: 2;}


.news-list .p-postList__title {
	font-size: 0.9rem;
}
.sec_produce .c-postThumb__figure {
	aspect-ratio: 35/52;
}

.sec_produce .p-postList__body{
  padding-top: 20px;
}

.sec_produce  .p-postList__body {
  display: flex;
  flex-direction: column;
}

.sec_produce .p-postList__meta {
  order: 1;
}

.sec_produce  .p-postList__title {
  order: 2;
}

.sec_news .-type-simple .p-postList__link {
    border-bottom: 1px solid #DD5C36;
    position: relative;
}

.sec_news .-type-simple .p-postList__link::before,
.sec_news .-type-simple .p-postList__link::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  bottom: -3px;
  background: #DD5C36;
}
.sec_news .-type-simple .p-postList__link::before{
  left: 0;
}
.sec_news .-type-simple .p-postList__link::after {
  right: 0;
}

.sec_news .p-postList.-type-simple {
    border-top:transparent;
}


.sec_contact {
  margin-top: 80px;
}


.contact-item-cmn {
  border: 1px solid #F0BE49;
  border-radius: 10px;
  margin: 30px auto;
  max-width: 500px;
}

.contact-item-cmn:first-child {
  margin-top: 33px;
}
.contact-item-in {
  padding: 24px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.contact-item-cmn h3 {
  color: #F0BE49;
  font-size: 1.2rem;
}
.contact-item-in p {
  font-size: 0.87rem;
}

.area-conatact {
  margin-top: 44px;
}
.area-conatact h4 {
  text-align: center;
  color: #DD5C36;
      font-size: 1.4rem;
}

.area-conatact .about-bg {
      width: 80%;
    margin: 49px auto 7px;
}

.btn-contact-cmn {
  margin: 0 auto;
  max-width: 500px;
  padding: 20px 0;
  background-color: #DD5C36;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  margin-top: 20px;
  font-weight: bold;
  position: relative;
}

.btn-contact-cmn::after {
     content: "";
    position: absolute;
    top: 31%;
    right: 15px;
    background-image: url(./img/arrow.svg);
    width: 47px;
    height: 23px;
    background-repeat: no-repeat;
    transform: scale(0.3);

}

.btn-contact-01 {
  margin: 50px 0 60px;
}

/* コンタクトフォーム */

.wpcf7-form {
  margin: 0 auto;
  min-width: 300px;
  width: 80%;

}

.wpcf7-form  input, select, textarea {
  width: 100%;
  background-color: #F8EDD9;
  color: #656464;
  border-radius: 10px;
  border: 2px solid #DD5C36
 }
.wpcf7 input[type=text] {

}

.wpcf7-form  .wpcf7-submit {
	    width: 30%;
    display: inline-block;
    min-width:180px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
	background-color: #DD5C36;
	color:#fff;
font-weight:bold;
}

.polisy {
	margin-top:10px;

}

.polisy label {
	display:flex;
}

.polisy input {
	width:13px;
	margin-right:10px;
}
.wpcf7 input[type=”submit”] {
background: #FF1493;
color: #ffffff;
border-radius: 4px;
font-size: 1.4em;
padding: 10px 20px;
}
.wpcf7 input[type=”submit”]:hover {
background: #FFC0CB;
font-weight: bold;
color: #ff1493;
}


/* コンタクトページ */

.contactpage-ttl {
  margin-top: 80px;
}
.area-qa-cmn {
  margin-top: 20px;
}
.qa-question {
  position: relative;
  border-radius: 102px;
  background: #327039;
  color: #fff;
  text-align: center;
  padding: 23px 32px;
  font-weight: bold;
}

.qa-question::after {
   content: "";
    background-image: url(./img/qa-q.svg);
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0px;
    right: -11px;
    position: absolute;
    width: 65px;
    height: 27px;
}

.qa-ans {
  border: 3px solid #327039;
  position: relative;
  border-radius: 102px;
  padding: 23px 32px;
}
.qa-ans::after {
    content: "";
    background-image: url(./img/qa-ans-01.svg);
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -4px;
    left: -15px;
    position: absolute;
    width: 65px;
    height: 27px;
}

.area-qa-cmn.qa-question.q-color {
    background: #F0BE49;
}

.q-color.qa-question::after {
   background-image: url(./img/qa-q-02.svg);
}

.area-qa-cmn.qa-ans.a-color{
  border-color: #F0BE49;
  font-weight: bold;
}

.a-color.qa-ans::after {
  background-image: url(./img/qa-ans-02.svg);
}

.btn-contact-wrap {
  text-align: center;
  margin-top: 100px;
}

.btn-contact {
  background-color: #DD5C36;
  color: #fff;
  padding: 16px 80px;
      display: inline-block;
      border-radius: 36px;
      font-weight: bold;
}

.post-time {
  position: absolute;
  bottom:20px;
  left:12px;
  color: #fff;
  font-weight: bold;
  text-shadow:0px 0px 17px rgba(0,0,0,.8) ;
      font-size: 12px;
    letter-spacing: .07em;

}

.post-caption {
  position: absolute;
  bottom:4px;
   left:12px;
  color: #fff;
  font-weight: bold;
  text-shadow:0px 0px 17px rgba(0,0,0,.8) ;
      font-size: 12px;
    letter-spacing: .07em;
}

.sns-list {
  margin: -4vw;
  padding: 40px 0;
  background-color: #DD5C36;
}


.sns-list-in {
    padding-left: var(--swl-pad_container, 0);
    /* padding-right: var(--swl-pad_container, 0); */
}

.area-ttlsns-cmn {
  padding-left: 50px;
  position: relative;
	margin-bottom:20px;
}

.youtube-title {
	font-size:14px;
	margin-top:8px;
	font-weight:bold;
}

.youtube-date {
	font-size:12px;
	font-weight:bold;
}

.area-ttlsns-cmn::before {
  content: "";
  position: absolute;
  background-image: url('./img/sns-01.svg');
  background-repeat: no-repeat;
    background-size: contain;
      top: 50%;
    left: 0;
    width: 34px;
    height: 31px;
    transform: translateY(-50%);
}

.sns-list-02 .area-ttlsns-cmn::before {
  background-image: url('./img/sns-02.svg');
}
.sns-list-03 .area-ttlsns-cmn::before {
  background-image: url('./img/sns-03.svg');
}
.mod-snslist-cmn {
  background-color: #fff;
  border-radius: 30px 0 0 30px ;
  padding: 30px 0 30px 30px;
  margin-left: 24px;
  margin-top: 30px;
}

#sns-carousel img,
#youtube-carousel img{
  border-radius: 20px;
}

.home h1 {
  display: none !important;
}
 .home.l-mainContent {
  margin-top: 20px;
}

.page-template-page-sns header {
  background: #DD5C36;
}
.page-template-page-members .l-header__logo,
.page-template-page-sns  .l-header__logo,
.page-template-page-contact .l-header__logo{
  display: none;
}

.page-template-page-sns .l-content {
  margin-top: 0;
  padding-top: 0;
}

.p-spMenu__inner::before {
    background: #F0BE49;
}

.c-widget__title.-spmenu {
    padding: .5em .75em;
    border-radius: var(--swl-radius--2, 0px);
    background: transparent;
    color: #fff;
}

.l-header {
    background:transparent;
}

.p-spMenu__nav {
  color: #fff;
  font-weight: bold;
}

.p-spMenu__nav .menu-item {
  position: relative;
}

.p-spMenu__nav .menu-item::after {
  content: "";
  width: 100%;
  height: 2px;
  background: #fff;
  bottom:0;
  left:0;
  position: absolute;
}

.p-spMenu__nav .menu-item:last-of-type::after  {
  content: none;
}

.icon-menu-thin:before {
  color: #F0BE49;
}

.icon-close-thin:before {
  color: #fff;
}

.about .swell-block-button__link {
	background: #F0BE49;
}

  &.fadeIn {
  animation: fadeIn .5s .5s forwards;
}

.contact .wpcf7 {
	margin-top:40px;
}

.form-nes {
	display:inline-block;
	width:5px;
	height:5px;
	background-image: url('http://okasuta.pdien.co.jp/wp-content/uploads/2025/10/Vector.png');
  background-repeat: no-repeat;
    background-size: contain;
	transform: translate(2px, -9px);
}

.wpcf7 p {
	margin-top:10px;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media screen and (min-width: 600px) {
  .top #content {
                padding-top: 10em
            }
  .kv-text {
    top:-6.189024vw;
  }

  .text-bubble-01,
  .text-bubble-02,
  .text-bubble-03,
  .text-bubble-04 {
    width: 500px;
    margin: 0 auto;
  }

  .text-cmn-bubble-in {
    font-size: 1.1rem;
    line-height: 2.7rem;
    font-weight: 600;
  }

  .instagram-list {
    grid-auto-rows: 224px;
    grid-gap: 10px;
  }
  .area-qa-cmn {
    width: 80%;
    max-width: 600px;
    margin-left:auto;
    margin-right:auto;
  }
  .contactpage-ttl {
    max-width: 800px;
    margin: 90px auto;
  }
  .mod-members .ttl-cmn {
    width: 60%;
  }
	.contact .ttl-cmn {
    width: 40%;
}
@media screen and (min-width: 900px) {
 .instagram-list {
    grid-auto-rows: 390px;
    grid-gap: 10px;
  }
}
@media screen and (min-width: 960px) {
	.l-header__menuBtn {
		display: block!important;/*ハンバーガーメニューを表示*/
		right:10px;/*位置を決める部分なので数値を変えて色々調整してみてください*/
	}
	.p-spMenu{
		display:block!important;/*ハンバーガーメニューを開いた時の中身を表示*/
	}
	.p-spMenu__inner {
    max-width: 50%;/*ハンバーガーメニューを開いた時の中身の幅を変える*/
    }  
	.l-header__menuBtn{
	position:fixed;
}
	.c-gnav{
	display:none;
}
}