@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
*/



/* ========================================
     Hero Section	
 ========================================= */
.lp-header-nav {
  display: flex;
  justify-content: left;
  align-items: flex-start;
  padding: 16px;
	gap: 20px;
	margin: 0;
}
.lp-logo img {
  max-height: 5.4cqw;
}
.lp-nav-menu {
  display: flex;
  gap: 5px;
}

.lp-nav-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
}

.lp-nav-item {
  background-color: #f9b700;
  color: #000;
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: bold;
	font-size: 1.2cqw;
		line-height: 1.2;
	color: #503125;
	  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  text-align: center;
}

.hero-detail{
	width: 40cqw;
	margin: 0 0 0 auto;
}
#main-copy{
	font-size: 8cqw;
	line-height: 1.2;
	letter-spacing: .1em;
}

/* スマホ（850px以下）は縦並びに */
@media screen and (max-width: 960px) {
	.lp-logo img {
  max-height: 12cqw;
}
/* 上段は2列 */
.row-1 .lp-nav-item {
  width: calc(50% - 5px);
}

/* 下段は3列 */
.row-2 .lp-nav-item {
  width: calc(33% - 4px);
}
 .lp-nav-menu {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
 .lp-header-nav {
  justify-content: space-between;
}
  .lp-nav-item {
    font-size: 2.2cqw;
    padding: 1cqw 2cqw;
  text-align: center;
			word-break:auto-phrase;
		  border-radius: 5px;
  }
.lp-nav-row {
  gap: .83cqw;
}
}
/*  PC幅　*/
.hero-red{
	text-align: left;
	width: 55cqw
}
.hero-copy-pc{
	width: 58cqw;
	margin: 0 5cqw auto;
}
.hero-meal{
	width: 42cqw;
	margin: 0 auto;
}

/*　SP幅　*/
/* スマホ（850px以下）は縦並びに */
@media screen and (max-width: 960px) {
	.lp-header-nav {
  padding-top: 50px;
}

.has-border, div.has-background, p.has-background.hero-logo-sp{
	padding: 1rem;
}
.hero-red-sp{
	padding: 20px;
}
.hero-container-sp{
	padding: 15px;
}
.hero-copy-sp{
	width: 60cqw
}
.hero-meal-sp{
	width: 60cqw
}
}
/* ========================================
    ここまで Hero Section	
 ========================================= */

	
/* ========================================
     Worry Section	
 ========================================= */
/*  PC幅　*/
.worry-header-pc{
	width:43.3cqw;
	margin: 0 auto;
}
.l-fz-text{
	font-size: 1.5cqw;
	display: block;
  text-indent: -1.2em;      
  padding-left: 1em;   
	line-height: 1.3;
}

/*　SP幅　*/
@media screen and (max-width: 768px) {
.l-fz-text{
	font-size: 5cqw;
}
.worry-header-sp{
	width:65cqw;
	margin: 0 auto;
}
}
/* ========================================
    ここまで Worry Section	
 =========================================
/* ========================================
     Solution Section	
 ========================================= */


/*　SP幅　*/
.solution-meal-sp{
	margin-top: -35cqw;
}
/* ========================================
    ここまでSolution Section	
 ========================================= */
/* ========================================
     Reason1 Section	
 ========================================= */
.p-reason-header{
	width: 40cqw;
	margin: 0 auto;
}
.p-reason-text{
	width: 55cqw;
	margin: 0 auto;
}
.reason-red-circle{
	width: 40cqw;
	margin: 0 auto;
}
/*　SP幅　*/
@media screen and (max-width: 768px) {
.p-reason-header{
	width: 80cqw;
}
.p-reason-text{
	width: 80cqw;
	margin: 0 auto;
}
}
/* ========================================
     Reason1 Section	
 ========================================= */
/* ========================================
     Reason2 Section	
 ========================================= */

.reason2-text{
	font-size: 2.5cqw;
}
.reason2-text-pc{
	position:relative;
}
.reason2-text-hand{
	position: absolute;
	top: -7cqw;
	right: 10cqw;
	width: 10cqw;
}
.reason2-text-sp{
	font-size: 6cqw;
	line-height: 1.2;
}
.reason2-text-pc{
	position:relative;
}
.reason2-text-hand-sp{
	position: absolute;
	top: 17cqw;
	right: 0cqw;
	width: 20cqw;
}
/* ========================================
     ここまでReason2 Section	
 ========================================= */
/* ========================================
     Reason3 Section	
 ========================================= */
#reason3-pc {
  position: relative;
  overflow: hidden; /* 子要素のはみ出し防止 */
}

#reason3-pc::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%; /* 高さ30% */
  background-color: #95C865; /* 帯の色 */
  z-index: 0; /* 必要に応じて調整 */
}
.reason3-container{
	positon: relative;
}

.reason3-comment{
	position: absolute;
	transform: translatex(40%);
	width: 30cqw;
}
.reason3-meal{
	width: 57cqw;
	margin: 0 auto;
}


/*　SP幅　*/
#reason3-sp {
  position: relative;
  overflow: hidden; /* 子要素のはみ出し防止 */
}

#reason3-sp::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15%; /* 高さ30% */
  background-color: #95C865; /* 帯の色 */
  z-index: 0; /* 必要に応じて調整 */
}


@media screen and (max-width: 768px) {
	.reason3-meal{
width: 90cqw;
}
}

.reason3-text-sp{
	width: 80cqw;
	margin: 0 auto;
}
.reason3-comment-sp{
	width: 80cqw;
	margin: 0 0 0 auto;
	position: relative;
	top: 30px;
}
/* ========================================
     ここまでReason3 Section	
 ========================================= */
/* ========================================
     Reason4 Section	
 ========================================= */
.reason4-text-pc{
	width: 40cqw;
	margin: 0 auto;
}
.reason4-text-sp{
	width: 70cqw;
	margin: 0 auto;
}
/* ========================================
     ここまでReason4 Section	
 ========================================= */
/* ========================================
     Reason5 Section	
 ========================================= */

.reason5-img-pc{
	box-shadow: 10px 10px 0 rgba(255, 165, 0, 1); 
	position: relative;
	top: -30px;
	left: -20px;
}
.reason5-left-pc{
	position:relative;
	right: -20px;
}

@media screen and (max-width: 768px) {
.reason5-left-pc{
	right: 0px;
}
.reason5-img-pc{
	top: -30px;
	left: 0px;
}
}
/* ========================================
     ここまでReason5 Section	
 ========================================= */
/* ========================================
    Voice Section	
 ========================================= */

.swiper{
	text-align: center;
}

.swiper-wrapper img{
width: 80%;
}

@media screen and (max-width: 960px){
.swiper-button-next, .swiper-button-prev{
	top: 27.5%!important;
}
}
/* ========================================
     ここまで Voice Section	
 ========================================= */

    /* gallerySwiper スタイル */
    .carouselSlider__swiper {
      width: 100%;
      padding: 40px 0;
      background: #f0f0f0;
    }

    .carouselSlider__swiper .swiper-slide {
      transition: transform 0.3s;
    }

    .carouselSlider__swiper img {
      width: 100%;
      border-radius: 12px;
      display: block;
    }
.carouselSlider__swiper {
	left: -12%;
	width: 125%;
}
.carouselSlider__swiper{
		width: 125%;
}
/* ========================================
   2コース Section	
 ========================================= */
.course2-head{
	width: 45cqw;
	margin: 0 auto;
}


@media screen and (max-width: 781px) {
.course2-head{
	width: 85cqw;
}
}
/* ========================================
    ここまで   2コース Section	
 ========================================= */

/* ========================================
    Time Section	
 ========================================= */
.time-header{
	width: 50cqw;
	margin: 0 auto;
}

@media screen and (max-width: 1024px) {
.time-column{
	flex-direction: column-reverse;
}
	.time-header{
	width: 85cqw;
}
}

.time-img{
		box-shadow: 10px 10px 0 rgba(255, 165, 0, 1); 
}




/* ========================================
    KOdawari Section	
 ========================================= */
@media screen and (max-width: 599px) {

.column-reverse .swell-block-columns__inner{
	flex-direction: column-reverse;
	}
}


.kodawari1-header{
	width: 25cqw;
}
.kodawari2-header{
	width: 38cqw;
}
@media screen and (max-width: 1080px) {
.kodawari1-header{
	width: 50cqw;
}
.kodawari2-header{
	width: 50cqw;
}
}
@media screen and (max-width: 599px) {
.kodawari1-header{
	width: 90cqw;
}
.kodawari2-header{
	width: 90cqw;
}
}

/* ========================================
    Pro Menu Section	
フルワイドでないと、スワイパーが崩れる
 ========================================= */

.pro-menu-header{
	width: 50cqw;
	margin: 0 auto;
}
.pro-menu-column{
	width: 50cqw;
	margin: 0 auto;
}
.orange-border{
	border: 1px solid orange;
	width: 60cqw;
	margin: 0 auto;
}
@media screen and (max-width: 1080px) {
.orange-border{
	width: 90cqw;
}
.pro-menu-column{
	width: 80cqw;
}	
.pro-menu-header{
		width: 70cqw;
}
}
/* ========================================
    Menu-Example
 ========================================= */

.menu-header-pc{
	width: 50cqw;
	margin: 0 auto;
}
@media screen and (max-width: 1080px) {
.menu-header-pc{
	width: 90cqw;
	margin: 0 auto;
}
}
/* ========================================
   recomend
 ========================================= */

.recomend-header{
	width: 45cqw;
	margin: 0 auto;
}
@media screen and (max-width: 1080px) {
.recomend-header{
	width: 70cqw;
}
}


.month8-header{
	width: 40cqw;
	margin: 0 auto;
}
@media screen and (max-width: 1080px) {
.month8-header{
	width: 80cqw;
}
}

/*  よくある質問前注意書き　*/
.explain{
	background: #FFE5D1;
	border: 3px solid #EB6B09;
	border-radius: 15px;
	padding: 10px 20px;
	font-size: 1.3rem;
	font-weight: bold;
}
/*  よくある質問前注意書き　*/


/* ========================================
   faq Section	
 ========================================= */
.faq-lp .faq_q{
	background-color: #2EB600;
color: white;
	border-radius: 20px;
}




/* ========================================
   Howto Section	
 ========================================= */
.howto-img-pc, .howto-img-pc-r{
	width: 20cqw;
}
.howto-img-pc-r{
  float: right; /* or any base style */
}
.howto-header{
	width: 30cqw;
	margin: 0 auto;
}
.howrto-range{
	width: 25cqw;
	margin: 0 auto;
}
@media screen and (max-width: 1080px) {
.howto-header{
	width: 65cqw;
}
.howrto-range{
	width: 55cqw;
}
}






/* ========================================
     Faq アコーディオン
 ========================================= */
.swell-block-faq__item .faq_q {
	cursor: pointer;
	padding-right: 1rem;
	position: relative;
}

/* 初期状態（閉じている時）に「＋」を表示 */
.swell-block-faq__item .faq_q::after {
	content: '+';
	position: absolute;
	top: 50%;
	right: 0.5rem;
	transform: translateY(-50%);
	font-size: 1.9rem;
	font-weight: bold;
	color: white;;
	transition: 0.3s ease;
}

/* 開いている時は「ー」に変更 */
.faq_q.faq-open::after {
	content: '−'; /* 全角マイナスでより自然に */
}

/* アコーディオン本体 */
.faq_a {
	transition: 0.5s;
}

/* 閉じているときの非表示処理 */
.faq_q:not(.faq-open) + .faq_a {
	padding-top: 0;
	padding-bottom: 0;
	height: 0;
	opacity: 0;
	overflow: hidden;
	transition: 0.5s;
}








/* ========================================
     申し込みフォーム	
 ========================================= */
.wpcf7 p {
  margin: 0;
  padding: 0;
}

/* フォーム全体 */
.wpcf7 form {
  max-width: 800px;
  margin: 0 auto;
}

/* ラベル（項目の区切り線を上に） */
.form-label {
  display: block;
  font-weight: bold;
  margin-top: 24px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* 最初のラベルのみ、区切り線なし */
.form-label:first-of-type {
  margin-top: 24px;
  padding-top: 30px;
}

/* 入力欄共通 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  padding: 12px;
  background-color: #fff5f5;
  border: 1px solid #f26300;
  border-radius: 0;
  margin-top: 4px;         /* ← ラベルとの間を狭く */
  margin-bottom: 24px;
  font-size: 16px;
  color: #333;
  box-sizing: border-box;
}

/* プレースホルダーのスタイル */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: #999;
  font-size: 14px;
}

/* 必須マーク（※）を赤く */
.wpcf7-form .wpcf7-required {
  color: red;
  font-weight: bold;
  margin-left: 6px;
}

/* 郵便番号と住所の距離を詰める */
.address-group {
  margin-top: 4px;
  margin-bottom: 24px;
}

.address-group input {
  margin-bottom: 4px;
  border-bottom: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* 送信ボタン */
.wpcf7-form input[type="submit"] {
  background-color: #f26300;
  color: white;
  border: none;
  padding: 14px 32px;
  font-size: 20px;
	font-weight: bold;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: block;
  margin: 40px auto 0;
}

/* ボタンホバー */
.wpcf7-form input[type="submit"]:hover {
  background-color: #d95400;
}
/* ========================================
     ここまで申し込みフォーム
 ========================================= */