@charset "UTF-8";
/*
  Theme Name:MINIMUM - LP
  Theme URI:
  Description:最小限構成のテンプレート
  Author:
  Author URI:
  Version:
  Requires at least:
  Tested up to:
  Requires PHP:
  License:
  License URI:
  Text Domain:
  Tags:
*/

/*=========================================================================
   Media Query
-------------------------------------------------------------------------*/
@media (max-width:359px) {} /* 320px Android2 iPhone */
@media (min-width:360px) and (max-width:374px) {} /* 360px Android4-5 */
@media (min-width:375px) {} /* 375px iPhone6 */
@media (min-width:414px) and (max-width:480px) {} /* 414px iPhone6 Plus - 480px iPhone4s Landscape */
@media (min-width:481px) and (max-width:767px) {}

@media screen and (-webkit-min-device-pixel-ratio:2){} /* SP Retina */
@media (min-width: 600px) {} /* TB */
@media (min-width: 1025px) {} /* PC */
/*=========================================================================
  import styles
-------------------------------------------------------------------------*/
/* レイヤーの優先順位の管理 base が詳細度が低く、utilities が最も詳細度が高くなり、優先されます */
@layer base,
       theme,
       layouts,
       components,
       utilities;
	   
/* Base */
@import '/assets/css/normalize.css' layer(base); /* normalize or rest file */
@import '/assets/css/base/base.css' layer(base); /* body and base styles */
@import '/assets/css/base/theme.css' layer(theme); /* theme variables */
@import '/assets/css/base/typography.css' layer(theme); /* theme typography */
@import '/assets/css/base/utilities.css' layer(utilities); /* base utilities */
 
/* Layouts */
@import '/assets/css/layouts/post.css' layer(layouts); /* post layout */
 
/* Components */
@import '/assets/css/components/cards.css' layer(components); /* imports card */
@import '/assets/css/components/footer.css' layer(components); /* footer component */


/*=========================================================================
  base styles CSS変数
-------------------------------------------------------------------------*/
/*
  CSSの三角関数でスクリーンサイズを取得する
  参考記事: https://coliss.com/articles/build-websites/operation/css/get-screen-size-and-font-size-with-just-css.html
  example：https://codepen.io/coliss/pen/GRPaPjw
*/
/*
:root {
  --100vw: 100vw;
  --100vh: 100vh;
  --px-width: calc( tan(atan2(var(--100vw), 1px)) );
  --px-height: calc( tan(atan2(var(--100vh), 1px)) );
}

@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}
@property --100vh {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}
*/
.example {
  width: calc(var(--px-width) * 1px * 0.25); /* スクリーンサイズの25% */
  height: calc(var(--px-height) * 1px); /* スクリーンサイズの100% */
}


/*
  20220317
  参考記事: https://coliss.com/articles/build-websites/operation/css/writing-logic-in-css.html
  example：https://codepen.io/iamschulz/pen/qBVowod
*/
:root {
	--paragraph-width: 90ch;
	--sidebar-width: 30ch;
	--layout-s: "header header" "sidebar sidebar" "main main" "footer footer";
	--layout-l: "header header" "main sidebar" "footer footer";
	--template-s: auto auto minmax(100%, 1fr) auto /
		minmax(70%, var(--paragraph-width)) minmax(30%, var(--sidebar-width));
	--template-l: auto minmax(100%, 1fr) auto /
		minmax(70%, var(--paragraph-width)) minmax(30%, var(--sidebar-width));
	--layout: var(--layout-s);
	--template: var(--template-s);
	--gap-width: 10px;

	--theme-hue: 210deg;
	--theme-sat: 20%;
	--theme-lit-l: 90%;
	--theme-lit-d: 20%;

	--theme-accent-hue: 200deg;
	--theme-accent-sat: 100%;
	--theme-accent-lit-l: 25%;
	--theme-accent-lit-d: 80%;

	--background-color: hsl(
		var(--theme-hue),
		var(--theme-sat),
		var(--theme-lit)
	);

	--font-color: hsl(
		var(--theme-hue),
		var(--theme-sat),
		clamp(10%, calc(100% - (var(--theme-lit) - 47%) * 1000), 95%)
	);

	--accent-color: hsl(
		var(--theme-accent-hue),
		var(--theme-accent-sat),
		var(--theme-accent-lit)
	);

	--accent-contrast-color: hsl(
		var(--theme-accent-hue),
		var(--theme-accent-sat),
		clamp(0%, calc(100% - (var(--theme-accent-lit) - 47%) * 1000), 100%)
	);

	--color-scheme: light dark;

	color-scheme: var(--color-scheme);
	
	/*===========================================
	  font styles → rem10px
	-------------------------------------------*/
	/* 参考：https://coliss.com/articles/build-websites/operation/css/fluid-type-scale-calculator.html
         　　https://www.webcreatorbox.com/tech/css-variables */
	--font-size-sm: clamp(0.8rem, 0.46vw + 0.62rem, 1.5rem);
	--font-size-base: clamp(1rem, 0.65vw + 0.75rem, 2rem);
	--font-size-md: clamp(1.25rem, 0.92vw + 0.89rem, 2.67rem);
	--font-size-lg: clamp(1.56rem, 1.3vw + 1.06rem, 3.55rem);
	--font-size-xl: clamp(1.95rem, 1.81vw + 1.25rem, 4.74rem);
	--font-size-xxl: clamp(2.44rem, 2.52vw + 1.47rem, 6.31rem);
	--font-size-xxxl: clamp(3.05rem, 3.5vw + 1.71rem, 8.42rem);
	/* 呼び出し font-size: var(--font-size-sm); */
	/* メディアクエリー
	@media (max-width: 600px) {
	  :root {
		font-size: var(--font-size-sm);
	  }
	}
	*/
	
	.material-icons {
		font-family: "Material Icons";
		font-size: 14px;
		display: inline-block;
		line-height: 1;
		white-space: nowrap;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}
	/* 設置例
	.className a::before {
		font-family: "Material Icons";
		font-weight: normal;
		font-style: normal;
		display: inline-block;
		line-height: 1;
		text-transform: none;
		text-indent: 0;
		letter-spacing: normal;
		word-wrap: normal;
		white-space: nowrap;
		direction: ltr;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-feature-settings: "liga";
		font-feature-settings: "liga";
		display: inline-block;
		width: 19px;
		height: 19px;
		margin-right: 15px;
		font-size: 23px;
		vertical-align: top;
		speak: never;
		content: "add";
	}
	*/
}

@media (min-width: 48rem) {
	:root {
		--layout: var(--layout-l);
		--template: var(--template-l);
	}
}
@media (prefers-color-scheme: light) {
	:root {
		--theme-lit: var(--theme-lit-l);
		--theme-accent-lit: var(--theme-accent-lit-l);
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		--theme-lit: var(--theme-lit-d);
		--theme-accent-lit: var(--theme-accent-lit-d);
	}
}

body {
	margin: 0 auto;
	/*
	display: grid;
	grid-template: var(--template);
	grid-template-areas: var(--layout);
	*/
	/* grid-gap: var(--gap-width); */
	justify-content: center;
	min-height: 100vh;
	max-width: calc( var(--paragraph-width) + var(--sidebar-width) + var(--gap-width) );
	/* padding: 0 var(--gap-width); */
	/* background-color: var(--background-color); */
	background:url("assets/img/bg_texture-wallpaper.webp") left top / 281px 194.5px repeat;
	color: var(--font-color);
	font-family:"Noto Sans JP",YuGothic,"Yu Gothic Medium","Yu Gothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif
}

h1,h2,h3,h4,p,figure,blockquote,dl,dd{ margin:0; }

body > header {
	grid-area: header;
}
body > aside {
	grid-area: sidebar;
	align-self: start;
}

body > main {
	grid-area: main;
}

body > footer {
	grid-area: footer;
	/*margin-top: 5rem;*/
	border-top: 1px solid currentColor;
}

:where(ul) {
	list-style: none;
	padding-left: 0;
}

:where(a[href]) {
	color: var(--accent-color);
}


/*===========================================*/

._fix {
	position: fixed;
	/*position: sticky;*/
    top: 0;
    left: 0;
    background: rgba(255,255,255,0);
    box-shadow: 0 0 16px rgba(0,0,0,0);
    transition: all .3s ease;
    transition-property: background, box-shadow;
	z-index: 11;
}
._passed-kv ._fix {
  background-color:rgba(247,247,247,0.5);
  background-image:-webkit-linear-gradient(rgba(255,255,255,0.4) 0%, rgba(247,247,247,0.8) 100%);
  background-image:linear-gradient(rgba(255,255,255,0.4) 0%, rgba(247,247,247,0.8) 100%);
  box-shadow:0 2px 1px rgba(0,0,0,0.1), inset 0 -1px 0 #fff;
}

header {
	width: 100%;
    margin: 0 auto;
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(224,245,255,1) 0%, rgba(255,255,255,1) 70%, rgba(255,255,255,1) 100%);
	
	.wrap {
		margin: 0 auto;
		max-width: calc( var(--paragraph-width) + var(--sidebar-width) + var(--gap-width) );
		padding: 0 var(--gap-width);
		
		& hgroup {
			display: flex;
			height:auto;
			justify-content: space-between;
			align-items: center;
			
			& h1 {}
			& .main-nav ul {
				display: flex;
				gap: 3px;
				
				& li {}
			}
		}
	}
}
header.thanks {
	h1 {padding-top: 20px;}
}
a.site-logo {
	display: block;
	width: calc(156px / 2);
	height: 0;
	padding-top: 37.2%;
	background:url("assets/img/logo_sp-white.webp")  0 0 no-repeat;
	background-size: 100%;
	overflow: hidden;
	
	@media (width >= 431px ) {
		width: calc(156px * 0.6);
		padding-top: 37.2%;
		background-image:url("assets/img/logo_sp-white.webp");
	}
	@media (width >= 600px ) {
		width: calc(156px * 0.8);
		padding-top: 37.2%;
		background-image:url("assets/img/logo_sp-white.webp");
	}
	@media (width >= 1025px ) {
		width: calc(156px * 1);
		padding-top: 37.2%;
		background-image:url("assets/img/logo_sp-white.webp");
	}

}
._passed-kv a.site-logo {
	display: block;
	width: calc(156px / 2);
	height: 0;
	padding-top: 37.2%;
	background:url("assets/img/logo_sp-color.webp")  0 0 no-repeat;
	background-size: 100%;
	overflow: hidden;
	
	@media (width >= 431px ) {
		width: calc(156px * 0.6);
		padding-top: 37.2%;
		background-image:url("assets/img/logo_sp-color.webp");
	}
	@media (width >= 600px ) {
		width: calc(156px * 0.8);
		padding-top: 37.2%;
		background-image:url("assets/img/logo_sp-color.webp");
	}
	@media (width >= 1025px ) {
		width: calc(156px * 1);
		padding-top: 37.2%;
		background-image:url("assets/img/logo_sp-color.webp");
	}
}
a.nav_tel {
	display: block;
	width: calc(174px / 2);
	height: 0;
	padding-top: 59.8%;
	background:url('assets/img/btn_sp_tel_w174.webp')  0 0 no-repeat;
	background-size: 100%;
	overflow: hidden;
	
	@media (370px <= width <= 430px ) {
		width: calc(200px / 2);
		padding-top: 52%;
		background-image:url("assets/img/btn_sp_tel_w200.webp");
	}
	@media (width >= 431px ) {
		width: calc(200px * 0.6);
		padding-top: 52%;
		background-image:url("assets/img/btn_sp_tel_w200.webp");
	}
	@media (width >= 600px ) {
		width: calc(200px * 0.8);
		padding-top: 52%;
		background-image:url("assets/img/btn_sp_tel_w200.webp");
	}
	@media (width >= 1025px ) {
		width: calc(200px * 1);
		padding-top: 52%;
		background-image:url("assets/img/btn_sp_tel_w200.webp");
	}
}
a.nav_form {
	display: block;
	width: calc(174px / 2);
	height: 0;
	padding-top: 59.8%;
	background:url("assets/img/btn_sp_form_w174.webp")  0 0 no-repeat;
	background-size: 100%;
	overflow: hidden;
	
	@media (370px <= width <= 430px ) {
		width: calc(200px / 2);
		padding-top: 52%;
		background-image:url("assets/img/btn_sp_form_w200.webp");
	}
	@media (width >= 431px ) {
		width: calc(200px * 0.6);
		padding-top: 52%;
		background-image:url("assets/img/btn_sp_form_w200.webp");
	}
	@media (width >= 600px ) {
		width: calc(200px * 0.8);
		padding-top: 52%;
		background-image:url("assets/img/btn_sp_form_w200.webp");
	}
	@media (width >= 1025px ) { /* PC */
		width: calc(200px * 1);
		padding-top: 52%;
		background-image:url("assets/img/btn_sp_form_w200.webp");
	}
	
}


/*===========================================*/

main.top,
main.thanks {
    margin: 0 calc(50% - 50vw);
	width: 100vw;
}
main.thanks {
	margin-bottom:-35px;
	
	@media (min-width: 1025px) { /* PC */
		margin-bottom:-68px;
	}
}

.main_visual {
    place-content: center;
    width: 100%;
    height: 100svh;
	overflow:hidden;
	
	.wrap {
		margin-top:40svh;
		height: 60svh;
	}
}
.mv_contents {
	z-index: 1;
	position: relative;
	width:100%;
	height:100%;
	
	.swiper {
		width:100%;
		height:100%;
		position:absolute;
		overflow:inherit;
		
		.swiper-wrapper {
			
			.swiper-slide {
				  box-sizing:border-box;
				  position:relative;
				  width:100%;
				  height:100%;
				  
				  
				  &:nth-child(1) .slide .img-cover {
					  left:50px;
					  width: 80%;
					  
					  @media (min-width: 1025px) { /* PC */
						margin:0 auto;
						width: 30%;
					  }
				  }
				  &:nth-child(2) .slide .img-cover {
					  margin-bottom:40px;
					  width: 100%;
					  
					  @media (min-width: 1025px) { /* PC */
						margin:0 auto;
						width: 30%;
					  }
				  }
				  &:nth-child(3) .slide .img-cover {
					  left:25px;
					  width: 90%;
					  
					  @media (min-width: 1025px) { /* PC */
						margin:0 auto;
						width: 30%;
					  }
				  }			  
				  
				  .img-cover {
					  	position:relative;
					  
						img {
							width:100%;
							height:100%;
							object-fit: cover;
						}
				  }
			}
		}
	}
	& p {
		position: absolute;
		bottom: 50px;
		width: 100%;
		
		@media (min-width:1025px) { /* PC */ bottom: 100px;}
		
		a img {
			display:block;
			margin:0 auto;
			
			@media (min-width:1025px) { /* PC */ width: 35%; height: auto; object-fit: cover; }
		}
	}
	.thanks_content{
		position:relative;
		text-align:center;
		
		img {
			@media (min-width:1025px) { /* PC */ margin-top:-200px; width: 30%; height: auto; object-fit: cover; }
		}
	}
}
.top_main_scroll {
	z-index: 1;
	position: absolute;
	bottom:200px;
	left: calc(50% - 37px);
	color:#ffffff;
	font-style:normal;
	text-decoration:none;
	transform:rotate(90deg);
	
	@media (min-width:1025px) { /* PC */ display:none; }
	
	::after {
		display:inline-block;
		position:relative;
		left:10px;
		content: ">>";
		transform: scaleY(2.0);
	}
}
.mv_contents .slide-media img {
	transition: 7s 1s ease-out;
}
.mv_contents .swiper-slide[class*=-active] .slide-media img {
	transition-delay: 0s;
	transform: scale(1.25);
}

  
.mv_bg {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	height: 100%;
}
.mv_bg_pic {
    display: block;
    width: 100%;
    height: 100%;
}
.mv_bg_pic img {
    width: 100%;
    height: 100%;
    max-width: inherit;
    object-fit: cover;
}

section.onayami {
	display: flex;
    justify-content: center;
	align-items: center;
    flex-direction: column;
	margin-top:30px;
	
	& h2 {
		width: 100%;
		
		& img {
			position:relative;
			left:10px;
			display: block;
			margin:0 auto;
			
			@media (min-width:1025px) { /* PC */ left:45px; width: 35%; height: auto; object-fit: cover; }
		}
	}
	& p {
		margin-top:-56px;
		@media (min-width:1025px) { /* PC */ margin-top:-80px; }
		
		& img {
			position:relative;
			left:-14px;
			
			@media (min-width:1025px) { /* PC */ display: block; margin:0 auto; width: 90%; height: auto; object-fit: cover; }
		}
	}
	& div {
		margin-top:20px;
		width: 100%;
		height: 90px;
		text-align: center;
		background:#fff url("assets/img/bg_texture-blue-wood.webp") left top / 450px 382.5px repeat;
		@media (min-width:1025px) { /* PC */ margin-top:40px; padding-bottom:30px; height: auto; }
		
		& img {
			display:inline-block;
			margin-top: -12px;
			
			@media (min-width:1025px) { /* PC */ margin:-25px auto 0; width: 50%; height: auto; object-fit: cover; }
		}
	}
}
section.meirou {
	display: flex;
    justify-content: center;
	align-items: center;
    flex-direction: column;
	margin-top:0;
	
	& h2 {
		margin-top:10px;
		
		img {
			@media (min-width:1025px) { /* PC */ width: 90%; height: auto; object-fit: cover; }
		}
	}
	& p {
		margin-top:14px;
		
		img {
			@media (min-width:1025px) { /* PC */ width: 90%; height: auto; object-fit: cover; }
		}
	}
}


section.results {
	display: flex;
    justify-content: center;
	align-items: center;
    flex-direction: column;
	margin-top: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	background: url("assets/img/bg_texture-wallpaper_yellow.webp") left top / 281px 194.5px repeat;
	@media (min-width:1025px) { /* PC */ padding-bottom: 40px; }
	
	& h2 {
		order: 1;
		margin-top: 20px;
		margin-bottom: 60px;
		@media (min-width:1025px) { /* PC */ margin-top:30px; margin-bottom:80px; }
		
		img {
			@media (min-width:1025px) { /* PC */ width: 100%; height: auto; object-fit: cover; }
		}
	}
	& .scroll_wrap {
		order: 0;
		width: 100vw;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		
		.swiper-wrapper {
			display: flex;
			flex-direction: row;
			animation: infinity-scroll-left 80s infinite linear 0.5s both;
			
			.swiper-slide {
				display: list-item;
				width: 180px;
				@media (min-width:1025px) { /* PC */ width: 15%; height: auto; }
				
				img {
					@media (min-width:1025px) { /* PC */ width: 100%; height: auto; object-fit: cover; }
				}
			}
		}
	}
	& .results_contents {
		order: 2;
		position:relative;
		margin-top: 20px;
		padding:10px 0 18px;
		width: 100vw;
		background: url("assets/img/bg_texture-blue-wood.webp") left top / 450px 382.5px repeat;
		@media (min-width:1025px) { /* PC */ padding-bottom:30px; height: auto; }
		
		.results-wrap {
			overflow: hidden;
			position: relative;
			margin: -80px auto 0;
			padding-top: 80px;
			max-width: 100%;
			@media (min-width:1025px) { /* PC */ margin: -100px auto 0; padding-top: 100px; }
			
			
			.results-carousel {
				overflow: visible;
				margin-top: -20px;
				@media (min-width:1025px) { /* PC */ height: auto; }
				
				.swiper-wrapper {
					
					& .swiper-slide {
						bottom: 0;
						position:relative;
						margin-right: 5px;
						padding-top: 70px;
						text-align:center;
						@media (min-width:1025px) { /* PC */ padding-top: 150px; width: 20%; height: auto; }
						
						span {
							position:absolute;
							top:-50px;
						}
						img {
							@media (min-width:1025px) { /* PC */ width: 100%; height: auto; object-fit: cover; }
						}
						
					}
				}
			}

		}
	}
	
}

section.plan {
	display: flex;
    justify-content: center;
	align-items: center;
    flex-direction: column;
	
	& h2 {
		margin-top:10px;
		
		img {
			@media (min-width:1025px) { /* PC */ width: 90%; height: auto; object-fit: cover; }
		}
	}
	& .plan_contents {
		position:relative;
		margin-top: 20px;
		padding:10px 0 18px;
		width: 100vw;
		background: url("assets/img/bg_texture-blue-wood.webp") left top / 450px 382.5px repeat;
		@media (min-width:1025px) { /* PC */ padding-bottom:30px; height: auto; }
		
		.plan-wrap {
			overflow: hidden;
			position: relative;
			margin: -20px auto 0;
			padding-top: 20px;
			max-width: 100%;
			
			
			.effect-carousel {
				overflow: visible;
				margin-top: -20px;
				@media (min-width:1025px) { /* PC */ height: auto; }
				
				.swiper-wrapper {
					
					& .swiper-slide {
						bottom: 0;
						position:relative;
						margin-right: 5px;
						width: 240px;
						@media (min-width:1025px) { /* PC */ width: 20%; height: auto; }
						
						img {
							@media (min-width:1025px) { /* PC */ width: 100%; height: auto; object-fit: cover; }
						}
						
					}
				}
			}

		}
		
	}
	
}

section.cta {
	margin-top: 34px;
	@media (min-width:1025px) { /* PC */ margin-top: 60px; }
	
	& h2 {
		text-align: center;
		
		img {
			@media (min-width:1025px) { /* PC */ width: 35%; height: auto; object-fit: cover; }
		}
	}
	
	& .cta_wrap {
		margin-top: 26px;
		padding-bottom: 12px;
		background: #ffaa00;
		@media (min-width:1025px) { /* PC */ padding-top: 40px; padding-bottom: 40px; }
		
		& .cta_catchcopy {
			text-align: center;
			
			& img {
				margin-top: -18px;
				
				@media (min-width:1025px) { /* PC */ width: 35%; height: auto; object-fit: cover; }
			}
		}
		
		& ul {
			margin: 0;
			text-align: center;
			
			& li {
				margin-bottom: 12px;
				
				img {
					@media (min-width:1025px) { /* PC */ width: 35%; height: auto; object-fit: cover; }
				}
			}
			
			& li:last-child {
				margin-bottom: 0;
			}
		}
	}

}

section.hyouka {
	margin-top: 32px;
	@media (min-width:1025px) { /* PC */ margin-top: 60px; }
	
	h2 {
		text-align: center;
		
		img {
			@media (min-width:1025px) { /* PC */ width: 30%; height: auto; object-fit: cover; }
		}
	}
	div {
		margin-top: 15px;
		
		dl {
			dt {
				text-align:center;
				@media (min-width:1025px) { /* PC */ margin-top: 60px; }
				
				img {
					@media (min-width:1025px) { /* PC */ width: 40%; height: auto; object-fit: cover; }
				}
			}
			dd {
				text-align:center;
				margin-top: 15px;
				
				img {
					@media (min-width:1025px) { /* PC */ width: 40%; height: auto; object-fit: cover; }
				}
			}
		}
	}

}

section.flow {
	margin-top: 34px;
	@media (min-width:1025px) { /* PC */ margin-top:60px; }
	
	h2 {
		text-align: center;
		
		img {
			@media (min-width:1025px) { /* PC */ width: 30%; height: auto; object-fit: cover; }
		}
	}
	
	.swiper-pagination-main {
		@media (min-width:1025px) { /* PC */ margin-top:30px; width: 40%; }
	}
	.flow-wrap {
		overflow:hidden;
		margin-top: 10px;
		padding:15px 0 18px;
		width: 100vw;
		background: url("assets/img/bg_texture-blue-wood.webp") left top / 450px 382.5px repeat;
		
		.swiper-flow {
			@media (min-width:1025px) { /* PC */ overflow:hidden; padding:40px 0 40px; width: 50%; }
			
			.swiper-wrapper {
				
				.swiper-slide {
					bottom: 0;
					margin-right: 5px;
					width: 175px;
					
					
					img {
						@media (min-width:1025px) { /* PC */ width: auto; height: 400px; object-fit: cover; }
					}
				}
			}

		}
		/*
		& .carousel {
			
			& .carousel-cell {
				bottom: 0;
				margin-right: 5px;
				width: 175px;
			}
		}
		*/
	}
}

.flow .swiper-flow {
	overflow:visible;
}

.flow .swiper-slide-active img {
	transform: scale(1.1);
}
.flow .swiper-slide::not(.swiper-slide-visible) img {
	pointer-events: none;
	opacity: 0.3;
}

.flow .swiper-pagination-main {
	display: flex;
	margin: 15px auto 25px;
}
.flow .swiper-pagination-main .swiper-pagination-bullet {
	background:none;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1;
	position: relative;
	flex: 1;
	padding-bottom: 60px;
	cursor: pointer;
	transition: .8s cubic-bezier(.2, 1, .2, 1);
	text-align: center;
	color: #666;
}
.flow .swiper-pagination-main .swiper-pagination-bullet::before,
 .flow .swiper-pagination-main .swiper-pagination-bullet::after {
	position: absolute;
	content: "";
	transition: .8s cubic-bezier(.2, 1, .2, 1);
	background-color: #f5695f;
}
.flow .swiper-pagination-main .swiper-pagination-bullet::before {
	z-index: 1;
	right: 0;
	bottom: -6px;
	left: 0;
	width: .8rem;
	height: .8rem;
	margin: auto;
	border-radius: 100px;
	box-shadow: 0 0 0 5px #f8f8f8;
}
.flow .swiper-pagination-main .swiper-pagination-bullet::after {
	right: 50%;
	bottom: 0;
	width: 100%;
	height: 3px;
}
.flow .swiper-pagination-main .swiper-pagination-bullet:first-child::after {
	display: none;
}
.flow .swiper-pagination-main .swiper-pagination-bullet .step {
	font-size: 1rem;
}
.flow .swiper-pagination-main .swiper-pagination-bullet-active {
	color: #f5695f;
}
.flow .swiper-pagination-main .swiper-pagination-bullet-active::before {
	box-shadow: 0 0 0 4px #f8f8f8, 0 0 0 7px #f5695f;
}
.flow .swiper-pagination-main .swiper-pagination-bullet-active ~ *::before,
 .flow .swiper-pagination-main .swiper-pagination-bullet-active ~ *::after {
	background-color: #666;
}
@media only screen and (max-width: 599px) {
	.flow .swiper-pagination-main {
		max-width: calc(100% - 3.2rem);
	}
	.flow .swiper-pagination-main .swiper-pagination-bullet::before {
		bottom: -5px;
	}
	.flow .swiper-pagination-main .swiper-pagination-bullet .step {
		font-size: .8rem;
		display: block;
		text-indent: 0.5em;
	}
}
@media only screen and (max-width: 1024px) and (min-width: 600px) {
	.flow .swiper-pagination-main {
		max-width: calc(100% - 6.4rem);
	}
}




section.area {
	display: flex;
    justify-content: center;
	align-items: center;
    flex-direction: column;
	margin-top:25px;
	@media (min-width:1025px) { /* PC */ margin-top:50px; }
	
	h2 {
		margin-top:10px;
		margin-left:-10px;
		z-index:1;
		
		img {
			@media (min-width:1025px) { /* PC */ width: 100%; height: auto; object-fit: cover; }
		}
	}
	& p {
		/*margin-top:-22px;*/
		margin-left:-10px;
		z-index:1;
		
		img {
			@media (min-width:1025px) { /* PC */ width: 100%; height: auto; object-fit: cover; }
		}
	}
}

section.cta.second {
	padding-top:20px;
	background: url("assets/img/bg_texture-wallpaper_yellow.webp") left top / 281px 194.5px repeat;
}

section.foot-form {
	display: flex;
    justify-content: center;
	align-items: center;
    flex-direction: column;
	margin-top:0;
	
	& h2 {
		box-sizing: border-box;
		padding-top:15px;
		width: 100%;
		height: 90px;
		text-align: center;
		background:#fff url("assets/img/bg_texture-blue-wood.webp") left top / 450px 382.5px repeat;
		@media (min-width:1025px) { /* PC */ padding-top:30px;  height:auto; }
		
		& img {
			display:inline-block;
			position:relative;
			bottom:-14px;
			
			@media (min-width:1025px) { /* PC */ display: block; margin:0 auto; width: 35%; height: auto; object-fit: cover; }
		}
	}
	& .form_info {
		margin-top:50px;
		@media (min-width:1025px) { /* PC */ margin-top:80px; }
		
		& p {
			font-size: var(--font-size-sm);
			line-height:1.5;
			
			em {
				color:#ff0000;
				font-weight:bold;
			}
		}
		
	}
	.form_contents {
		margin:10px auto 0;
		width:100%;
		overflow:hidden;
		
		@media (min-width:1025px) { /* PC */ margin-top:35px; width: 40%; }
	}
	
}

footer {
	margin-top: 34px;
	padding: 20px 0 10px;
    width: 100vw;
	display: flex;
    justify-content: center;
	align-items: center;
    flex-direction: column;
	background:#005580;
	@media (min-width:1025px) { /* PC */ margin: 15px calc(50% - 50vw) 0; }
	
	.foot_wrap {
		@media (min-width:1025px) { /* PC */ width: 40%; }
		
		h2 {
			margin-bottom: 20px;
			
			img {
				@media (min-width:1025px) { /* PC */ width: 25%; height: auto; object-fit: cover; }
			}
		}
		
		p {
			font-size: var(--font-size-sm);
			line-height:1.5;
			color:#ffffff;
			
			img {
				@media (min-width:1025px) { /* PC */ width: 50%; height: auto; object-fit: cover; }
			}
		}
		
		p.copy_right {
			margin-top: 30px;
			text-align:center;
		}
	
	}
	
}


@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
.some-class { height:750px;}


/*=========================================================================
   カルーセル Swiper v11
-------------------------------------------------------------------------*/


.swiper-button-prev, .swiper-button-next {
	display: grid;
	place-content: center;
	width: 3rem;
	height: 3rem;
	cursor: pointer;
	transition: .8s cubic-bezier(.2, 1, .2, 1);
}
@media (min-width:1025px) { /* PC */ 
.swiper-button-prev { position:relative; left:26%; }
.swiper-button-next { position:relative; right:26%; }
}
.swiper-button-prev::before, .swiper-button-next::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: "";
	border-radius: 50%;
	/*box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .05), -.8rem -.8rem 1.2rem #fff;*/
}
.swiper-button-prev::after, .swiper-button-next::after {
	width: .8rem;
	height: .8rem;
	content: "";
	border: solid #ddd;
	border-width: 3px 3px 0 0;
}
.swiper-button-prev::after {
	margin-left: 0.4rem;
	transform: rotate(-135deg);
}
.swiper-button-next::after {
	margin-right: 0.4rem;
	transform: rotate(45deg);
}
.swiper-button-disabled {
	pointer-events: none;
	opacity: 0;
}
.swiper-button-prev, .swiper-button-next {
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	margin: auto;
}
.swiper-button-prev::before, .swiper-button-next::before {
	background-color: rgba(0, 0, 0, 0.3);
	box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .1), -.8rem -.8rem 1.2rem rgba(#fff,.2);
}
.swiper-button-prev::after, .swiper-button-next::after {
	border-color: #fff;
}
/*
.plan_contents .swiper-button-prev {
	right: calc(100% - 1.6rem);
}
@media only screen and (max-width: 1024px) {
	.plan_contents .swiper-button-prev {
		right: calc(100% - 5.2rem);
	}
}
.plan_contents .swiper-button-next {
	left: calc(100% - 1.6rem);
}
@media only screen and (max-width: 1024px) {
	.plan_contents .swiper-button-next {
		left: calc(100% - 5.2rem);
	}
}
*/



/*
:root {
  --swiper-navigation-color: #fff;
  --swiper-pagination-color: #fff;
  --swiper-pagination-bullet-inactive-color: #fff;
}

.swiper-carousel {
  padding-bottom: 32px;
  max-width: 1200px;
}
.swiper-carousel .swiper-slide {
  width: 520px;
  height: 380px;
  border-radius: 8px;
  background: #18212b;
  max-width: calc(100% - 48px);
}
.swiper-carousel .swiper-carousel-animate-opacity {
  height: 100%;
}
.swiper-carousel .swiper-pagination-bullets {
  bottom: 0;
}
.swiper-carousel img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 8px;
}
.swiper-carousel .slide-content {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  padding: 88px 16px 24px;
  box-sizing: border-box;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
  border-radius: 0 0 8px 8px;
}
.swiper-carousel .slide-content h2 {
  margin: 0;
  font-weight: bold;
  font-size: 24px;
  line-height: 1.1;
}
.swiper-carousel .slide-content p {
  margin: 8px 0 0;
  opacity: 0.65;
  font-size: 14px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (max-width: 640px) {
.swiper-carousel .swiper-button-next,
.swiper-carousel .swiper-button-prev {
    display: none !important;
  }
}
*/

/******************************/
/** コンタクトフォームの装飾 **/
/******************************/

/*　フォーム全体　*/
#cf7-area {
width:90%;
margin: 0 auto;
font-family: "遊ゴシック","ヒラギノ角ゴ","メイリオ","MS Pゴシック",sans-serif;
}

.cf7-item {
display: flex;
align-items: flex-start;
justify-content: flex-start;
margin: 0 0 1.75em;
}

.cf7-q {
width: 30%;
margin: 0 0 0 10px;
}

.cf7-a {
width: 60%;
}

/*　見出し　*/
.form-heading {
width: 96%;
background-color: #191970;
border-left: 1em solid #6495ED;
border-radius: 2px;
color: #ffffff;
font-weight: bold;
padding: 1em .8em;
margin: 0 0 2em;
}

.form-heading p {
margin: 0;
}

/* 各項目共通 */
#cf7-area label{
font-weight:bold;
font-size:1.3rem;
}

#cf7-area input[type="text"],#cf7-area input[type="email"],#cf7-area input[type="tel"],#cf7-area textarea {
background: #F0F8FF;
width:96%;
margin-left:10px;
font-size:1.3rem;
}

#cf7-area input[type="text"]:focus,#cf7-area input[type="email"]:focus,#cf7-area input[type="tel"]:focus,#cf7-area textarea:focus {
background: #FFE4E1;
border: 2px solid #FF1493;
outline: 0;
}

#cf7-area input[type="checkbox"], #cf7-area input[type="radio"]{
appearance: auto;
}

#cf7-area .wpcf7-list-item {
display: block;
}

#cf7-area textarea{
height:10rem;
padding: 0.625em 0.4375em;
}

.cf7-accept-check{
text-align: center;
margin: 50px auto;
}
.wpcf7-list-item-label {
font-size:1.3rem;
}

.cf7-submit {
width: 40%;
margin: 0 auto;
text-align: center;
}

#cf7-area input[type="submit"]
{
width: 100%;
background-color: #191970;
color: #ffffff;
border-radius: 5px;
font-size: 1.2em;
padding: 1em 10px;
}

#cf7-area input[type="submit"]:hover
{
background-color:#ffffff;
border: 2px solid #191970;
color:#191970;
}

.cf7-btn{
width: 40%;
margin: 0 auto;
text-align: center;
}

/*　必須ラベル　*/
.cf7-req{
font-size:.8em;
padding: 4px 6px;
background: #eb2a2a;
color: #ffffff;
margin-left: 10px;
display:inline-block;
}

@media screen and (max-width:768px){
.form-heading {
	width:90%;
}
		
.cf7-item {
display: block;
}

#cf7-area label{
display: block;
margin-bottom: 10px;
font-size:1.2rem;
}

.cf7-q {
width: 100%;
margin: 0;
}

.cf7-a {
width: 100%;
}

#cf7-area input[type="text"], #cf7-area input[type="email"], #cf7-area input[type="tel"], #cf7-area textarea{
margin-left: 0;
font-size: 1.2em;
}

.wpcf7-list-item-label {
font-size:1.2rem;
}

.cf7-submit{
width: 90%;
}
}
/*=========================================================================
   グローバルナビ - ハンバーガーメニュー
-------------------------------------------------------------------------*/
/* 参考：https://www.asobou.co.jp/blog/web/css-menu */
body > header {  }
.menu-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #595959;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}
#menu-btn-check {
    display: none;
}
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #3584bb;
    transition: all 0.5s;/*アニメーション設定*/
}
.menu-content ul {
    padding: 70px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}