@charset "UTF-8";

/*Copyright 2018 Hyuga Kouzai.*/
/* CSS Document */
/* ------------------------------------------------ */
/* トップページ
/* ------------------------------------------------ */

/* トップページ ページ全体を囲む枠 */
#wrapper{
	height:100%;
	margin:0 auto;
	font-family: 
		"Yu Mincho",
		"Hiragino Mincho Pro",
		"Yu Gothic",
		"Arial",
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		"Noto Sans JP",
		sans-serif,
		serif;
}
/*サブページタイトル設定マーク付き*/
 .sub_toptitle {
	background-color: #fff;
	color: #4e4e4e;
	text-align:left;
	line-height:1rem;
	font-weight: bold;
	font-size: 1.5rem;
	margin:1rem;
	padding: 0.5rem 2rem;
	border-bottom:3px solid #999999;
	&:before{
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		content: '\f14a';/*　'\f4d8';双葉*/
		padding-right:0.5rem;
		font-size:1.5rem;
	}
}

/* ▼sliderのループ PC用：90秒でループ */
@media screen and (min-width: 768px){
  .slider__wrapper {
    animation-duration: 80s;
  }
  .slider__list li {
    --this-width: clamp(200px, 20vw, 300px);
  }
}

/* ▼mini slider */
.slider__container {
  overflow: hidden;
  margin: 0 auto;
  border-top: #9f9f9f solid 3px;
  border-bottom: #9f9f9f solid 3px;
	/*▼mini slider背景メタル風*/
  background: 
    linear-gradient(27deg, #726b6b 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #726b6b 5px, transparent 5px) 10px 0px,
    linear-gradient(27deg, #737171 5px, transparent 5px) 0px 10px,
    linear-gradient(207deg, #737171 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #767676 10px, transparent 10px),
    linear-gradient(#7a7878 25%, #757474 25%, #757474 50%,
      transparent 50%, transparent 75%, #686565 75%, #686565);
    background-color: #757272;
    background-size: 20px 20px;
  }
.slider__wrapper {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	width: max-content;
	z-index: 1;
	animation: scroll 20s linear infinite;
	&:hover{
		animation-play-state: paused;
	}
	.slider__list {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		margin: 0;
		list-style: none;
		& > ul{
			padding:0;
		}
		& > li{
			min-width: var(--this-width);
			max-width: var(--this-width);
			margin:calc(0.8rem);
			text-align: center;
			transition: transform .6s ease; /* hover後、ゆっくり拡大 */
			border-radius: 5px ;
			overflow: hidden;
			font-family: 
				"Arial",
				"Hiragino Kaku Gothic ProN",
				"Hiragino Sans",
				"Noto Sans JP",
				sans-serif;
			&:hover {
				transform: scale(1.1); /* 拡大 */
			}
			& > a{
				display: inline-block;
				width:80%;
				text-decoration: none;
				line-height: 1.5rem;
				color:#fff;
				font-family: "M PLUS Rounded 1c", メイリオ,Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
				font-size: 0.8rem;
				background-color: rgba(39, 39, 39, 0.8);
				border-radius: 0 0 5px 5px;
				overflow: hidden;
				opacity: 0.8;
				&:hover{
					color:#646464;
					font-size: 0.8rem;
					background-color: #fff;
					opacity: 1;
				}
				& > img{
					width:100%;
					height: auto;
					aspect-ratio: 16/9 auto;
					object-fit: cover;
					opacity: 0.8;
					&:hover{
						opacity: 1;
					}
				}
			}
		}
	}
}

/*▼TOPページパララックス*/
#parallax-section {
  font-family: 
    "Yu Mincho",
    "Hiragino Mincho Pro",
    "Yu Gothic",
    "Arial",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Noto Sans JP",
    sans-serif,
    serif;
	color:#fff;
	& div{
		box-sizing: border-box;
		color: #FFF;
		-webkit-align-items: center; 	
		align-items: center; 	
		-webkit-justify-content: center; 	
		justify-content: center; 
		overflow: hidden;
	}
	.container{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		text-align: center;
		width: 100%;
	}
}

/*▼スクロールするコンテンツ*/
#parallax-section{
	.content-section1,
	.content-section2,
	.content-section3,
	.content-section4,
	.content-section5{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		-webkit-align-items: center; 	
		align-items: center; 	
		-webkit-justify-content: center; 	
		justify-content: center; 	
		width: 100vw;
		min-height: 100vh;
		background-color: #fff;
		font-size: 3rem;
	}
}
/* ▼パララックスscrollするとフェードイン */
.scroll-space {
	box-sizing: border-box;
	color: #fff;
	overflow: hidden;
	margin:4rem auto;
	.fadein{
		opacity: 0;
		transform: translate(0, 0);
		transition: all 1.5s;
		overflow:hidden;
	}
	img{
		display:inline-block;
		transition: transform .6s ease;
	}
	&:hover img{
		transform: scale(1.05);
	}
}
.fadein.fadein-bottom {
	transform: translate(0, 100px);
}
.fadein.scrollin {
	opacity: 1 !important;
	transform: translate(0, 0) !important;
}
@keyframes scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
	
/*パララックス用の背景レイヤー*/
#parallax-section {
	.parallax-section1,
	.parallax-section2,
	.parallax-section3,
	.parallax-section4,
	.parallax-section5{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		clip-path: inset(0);
		width:100vw;
		height: 100vh; /* 画面の高さ */
		box-sizing: border-box;
	}
}
#parallax-section {
	.parallax-section1::after,
	.parallax-section2::after,
	.parallax-section3::after {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		z-index: -10;
		width:100vw;
		height:100vh;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
}
/* パララックス各背景の画像 */
#parallax-section {
	.parallax-section1::after {
		background-image: url('img/top21.jpg'); 
		animation: fade-in 1s;
		animation-fill-mode: forwards;
    }
	.parallax-section2::after { background-image: url('img/top22.jpg'); }
	.parallax-section3::after { background-image: url('img/top23.jpg'); }
}
/* パララックス content-section2,content-section3 */
#parallax-section {
	& .content-section2{
		& .container{
			overflow: hidden;
			& h3{
			position: relative;
			margin-bottom:2rem;
			color:#00AFCC;
			right: 0;
			font-size: 1.5rem;
			& > span{
				font-size: 1.2rem;
				}
			}
			& p{
				right: 0;
				margin-top:1rem;
				line-height: 2rem;
				font-size: 1.2rem;
			}
			& p:nth-last-child(1){
				width: 55%;
				margin:2rem auto 0rem;
				padding:1rem;
				border:double 10px #fff;
				background-color: #ffe600;
				line-height: 2rem;
				color:#646464;
				font-family: "Noto Serif JP", serif;
				font-weight: 600;
				font-size: 1rem;
				transform: scale(1);
				transition: transform 0.5s ease;
				&:hover{
					transform: scale(1.05);
					background-color: #2AA8E5;
					color: #000;
					font-size: 1.1rem;
				}
			}
			& a{
				display:block;
				& > img{
					display:inline-block;
					width: 70%;
					height: auto;
					border-radius: 50%;
				}
			}
		}
	}
}
#parallax-section {
	& .content-section3{
		& .container{
			overflow: hidden;
			& h3{
			position: relative;
			margin:0 auto 2rem;
			color:#00AFCC;
			right: 0;
			font-size: 1.5rem;
			& > span{
				font-size: 1.2rem;
				}
			}
			& p{
				right: 0;
				margin-top:1rem;
				line-height: 2rem;
				font-size: 1.2rem;
			}
			& > .s_wrap{
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 1.5rem;
				width: calc(100% - 15%);
				height:auto;
				margin:0 auto ;
				& > .s_block{
					text-align: center;
					background-color: #fff;
					padding:1rem;
					& > a{
						display:block;
						& > img{
							width: 100%;
							height: auto;
							border-radius: 50%;
						}
					}
				}
			}
		}
	}
}

/*▼フェードイン*/
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#parallax-section .parallax-section1 div{
  text-shadow: 0 2px 10px rgba(0,0,0,.3);
}
#parallax-section{
	.content-section1 .container,
	.content-section2 .container,
	.content-section3 .container,
	.content-section4 .container,
	.content-section5 .container{
	display: block;
	color: #4d4d4d;
	}
}
/* ▼parallax-section1 */
#parallax-section .parallax-section1 .container{
	display: block;
	width:100%;
	font-family: 
	"Meiryo",
	"Hiragino Kaku Gothic ProN",
	"Hiragino Sans",
	"Noto Sans JP",
	sans-serif;
	h1{
		display: none;
	}
	p{
		font-family: "M PLUS Rounded 1c", メイリオ,Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
		font-size:1.6rem;
		text-shadow: 0 2px 10px rgba(0,0,0,.3);
	}
	img{
		width: 50%;
	}
}
#parallax-section .parallax-section1{
	.animated-text_l {
		opacity: 0;
		animation: slideIn_l 1s forwards;  
	}
	.animated-text_r{
		opacity: 0;
		animation: slideIn_r 1s forwards;  
	}
}
/*▼animated-text_lのkeyframes*/
	@keyframes slideIn_l {
		from {
			transform: translateX(-100%);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
	/*animated-text_rのkeyframes*/
	@keyframes slideIn_r {
		from {
			transform: translateX(100%);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

/* ▼parallax-section2・3 */
#parallax-section {
	.parallax-section2,
	.parallax-section3{
		.text__motion{
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
			flex-direction: column;
			min-height: 100vh;
			line-height: 1.5;
			font-size: 3vw;
			color: #fff;
		}
		.wrap{
			border:#fff double 5px;
			padding:3rem;
			box-shadow:  0 2px 10px rgba(0,0,0,.8);
			background-color: rgba(0,0,0,.4);
			opacity: 0.95;

		}
	}
}
#parallax-section {
	.parallax-section2,
	.parallax-section3{
		.item{
			.text-item {
				width: -webkit-fit-content;
				width: -moz-fit-content;
				width: fit-content;
				overflow: hidden;
				text-shadow: 0 2px 10px rgba(0,0,0,.8);
			}
		}
	}
}
/*parallax-section2,parallax-section3 入れ子にしない*/
	.item .text-item {
	transform: translateX(-101%);
	}
	.item .is-active .text-item {
	transform: translateX(0);
	transition: transform cubic-bezier(0.74, 0, 0.24, 0.99) 2.8s;
	}
	.item .is-active .text-item:nth-child(1) {
	transition-delay: 0s;
	}
	.item .is-active .text-item:nth-child(1) > span {
	transition-delay: 0s;
	}
	.item .is-active .text-item:nth-child(2) {
	transition-delay: 2s;
	}
	.item .is-active .text-item:nth-child(2) > span {
	transition-delay: 2s;
	text-align: center;
	}
	.item .is-active .text-item:nth-child(3) {
	transition-delay: 3s;
	}
	.item .is-active .text-item:nth-child(3) > span {
	transition-delay: 3s;
	text-align: center;
	}
	.item .is-active .text-item:nth-child(4) {
	transition-delay: 4s;
	}
	.item .is-active .text-item:nth-child(4) > span {
	transition-delay: 4s;
	text-align: center;
	}
	.item .text-item > span {
	display: block;
	}
	.item .text-item > span {
	transform: translateX(101%);
	}
	.item .is-active .text-item > span {
	transform: translateX(0);
	transition: transform cubic-bezier(0.74, 0, 0.24, 0.99) 2.8s;
	}


/*▼slideInUpあとで削除かも*/
@keyframes slideInUp {
  0% {
    /* 1. 下に隠す（垂直方向に50px〜100pxずらす） */
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    /* 2. 本来の位置に戻す */
    transform: translateY(0);
    opacity: 1;
  }
}
/* ▼パララックス content-section4 */
#parallax-section .content-section4 {
	background-color: #bebebe;
	background-image:
		radial-gradient(#ccc 30%, transparent 33%),
		radial-gradient(#ccc 30%, transparent 33%);
	background-size: 8px 8px;
	background-position: 0 0, 4px 4px;
	& .category_wrap{
		min-height: 100vh;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center;
		width: calc(100% - 10%);
		margin:0 auto;
		& > .c_wrap{
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 2rem 2%;
			width: calc(100% - 20%);
			& > .c_block{
				color:#333;
				border-radius: 5px;
				text-align: center;
				background-color: #fff;
				& > a{
					display: block;
					margin:0;
					color:#333;
					line-height: 1.8rem;
					font-family: "M PLUS Rounded 1c", メイリオ,Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
					font-weight: 300;
					font-style: normal;
					font-size:0.8rem;
					& > img{
						width: 100%;
						margin:0;
						border-radius: 5px 5px 0 0;
					}
				}
			}
		}
	}
}
/* ▼パララックス parallax-section4 */
#parallax-section .parallax-section4{
  width: 100%;
  & div{
	width: 80%;
	margin:0 auto;
	text-align: center;
	& > a {
		display: block;
		color:#333;
		line-height: 1rem;
		font-size:1.2rem;
		& > img{
			display: block;
			width: 55%;
			margin:1rem auto;
			border-radius: 5px;
		}
	}
  }
}
/* プライバシーポリシーのリスト枠 */
#our-policy ol {
	margin-bottom: 25px;
}
#our-policy li {
	list-style: decimal inside;
}

/* ------------------------------------------------ */
/* タブレット*/
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (min-width: 760px) and (max-width:1300px) {
	.menu-icon {
		top: 2rem;
	}
	
    /*スクロールするコンテンツ*/
    #parallax-section .parallax-section2,
    #parallax-section .parallax-section3,
    #parallax-section .parallax-section4,
    #parallax-section .parallax-section5,
    #parallax-section .content-section1,
    #parallax-section .content-section2,
    #parallax-section .content-section3,
    #parallax-section .content-section4{
      min-height: 100vh;
    }
	/* ▼parallax-section1 */
	#parallax-section .parallax-section1 .container{
		& p{
			font-size:3rem;
			text-shadow: 0 2px 10px rgba(0,0,0,.3);
		}
		& img{
			width: 70%;
		}
	}
	/* パララックス content-section2,content-section3 */
	#parallax-section {
		& .content-section2,
		& .content-section3{
			& .container{
				& h3{
				font-size: 2rem;
				& > span{
					font-size: 1..5rem;
					}
				}
				& p{
					margin-top:2rem;
					font-size: 1.5rem;
				}
			}
		}
	}
	/* パララックス content-section2　在庫ボタン */
	#parallax-section .content-section2 .container p:nth-last-child(1){
		width: 60%;
		font-size: 1.2rem;
		&:hover{
			font-size: 1.3rem;
		}
	}

	#parallax-section .content-section4 {
		& .category_wrap{
			min-height: 100vh;
			margin:3rem auto;
			& > .c_wrap{
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 1.5rem;
				width: calc(100% - 25%);
				& > .c_block{
					border-radius: 5px;
					text-align: center;
					background-color: #fff;
					& > a{
						display: inline-block;
						margin:0;
						color:#333;
						background-color: #fff;
						line-height: 3rem;
						font-family: "M PLUS Rounded 1c", メイリオ,Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
						font-weight: 200;
						font-style: normal;
						font-size:1.5rem;
						& > img{
							width: 100%;
							margin:0;
							border-radius: 5px 5px 0 0;
						}
					}
				}
			}
		}
	}
  /* ▼parallax-section2・3 */
	#parallax-section{
		.parallax-section2,
		.parallax-section3{
		.text__motion{
			line-height: 3rem;
			font-size: 4.5vw;
			}
		}
	}
	#parallax-section  .parallax-section2 .wrap{
		padding:1rem;
	}
	#parallax-section  .parallax-section3 .wrap{
		padding:3rem;
	}
	/* ▼パララックス parallax-section4 */
	#parallax-section .parallax-section4{
	width: 100%;
		& div{
			width: 90%;
			& > a {
				margin:0 auto;
				line-height: 3rem;
				font-size:1.5rem;
				& > img{
					width: 80%;
					margin:0.5rem auto;
				}
			}
		}
	}
	
	/* youtube process */
	#process #business_contents{
		.movie-you_t{
			width:80%;
			margin:2rem auto 5rem;
		}
	}
}
	
/* ------------------------------------------------ */
/* 600～700pxのタブレットサイズに対応
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (min-width: 600px) and (max-width:700px) {
    /*スクロールするコンテンツ*/
	/* ▼parallax-section1 */
	#parallax-section .parallax-section1 .container{
		& p{
			font-size:1.5rem;
			text-shadow: 0 2px 10px rgba(0,0,0,.3);
		}
		& img{
			width: 80%;
		}
	}
	/* ▼parallax-section2・3 */
	#parallax-section {
		.parallax-section2,
		.parallax-section3{
			.text__motion{
				font-size: 1.3rem;
				color: #fff;
			}
		}
	}
	/* ▼content-section4 */
	#parallax-section .content-section4 {
		& .category_wrap{
			min-height: 100vh;
			width: calc(100% - 15%);
			margin:3rem auto;
			& > .c_wrap{
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 1.5rem;
				width: calc(100% - 10%);
				& > .c_block{
					border-radius: 5px;
					text-align: center;
					background-color: #fff;
					& > a{
						display: inline-block;
						margin:0;
						color:#333;
						background-color: #fff;
						line-height: 2rem;
						font-family: "M PLUS Rounded 1c", メイリオ,Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
						font-weight: 200;
						font-style: normal;
						font-size:1.2rem;
						& > img{
							width: 100%;
							margin:0;
							border-radius: 5px 5px 0 0;
						}
					}
				}
			}
		}
	}
	#parallax-section .parallax-section4{
      min-height: 100vh;
	  & div{
		width: 70%;
		& > a {
			width: 90%;
			line-height: 2rem;
			font-size:2rem;
			}
		}
	}
}
  
/* ------------------------------------------------ */
/* レスポンシブ（780px以下）
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (max-width:780px) {
	/*TOPページパララックス*/
	/* ▼parallax-section1 */
	#parallax-section .parallax-section1 .container{
		& p{
			font-size:1.5rem;
			text-shadow: 0 2px 10px rgba(0,0,0,.3);
		}
		& img{
			width: 80%;
		}
	}
	#parallax-section .container h3{
		-webkit-text-stroke: 0.5px #fff;
	}
	/* ▼parallax-section2,3,4 */
	/*パララックス用の背景レイヤー*/
	.parallax-section2,
	.parallax-section3,
	.parallax-section4{
	height: 70vh;
	}
	/* ▼parallax-section2・3 */
	#parallax-section {
		.parallax-section2,
		.parallax-section3{
			.text__motion{
				font-size: 1.3rem;
				color: #fff;
			}
		}
	}
	/* パララックス各背景の画像 */
	#parallax-section {
		.parallax-section1::after {
			background-image: url('img/top21s.jpg'); 
			animation: fade-in 1s;
			animation-fill-mode: forwards;
		}
	}
	#parallax-section {
		.parallax-section2::after {
			background-image: url('img/top22s.jpg'); 
			animation: fade-in 1s;
			animation-fill-mode: forwards;
		}
	}
	#parallax-section {
		.parallax-section3::after {
			background-image: url('img/top23s.jpg'); 
			animation: fade-in 1s;
			animation-fill-mode: forwards;
		}
	}

	/* ▼#parallax-section content-section1,2,3 */
	/*スクロールするコンテンツ*/
	#parallax-section .content-section1,
	#parallax-section .content-section2,
	#parallax-section .content-section3{
		min-height: 100vh;
	}
	/* パララックス content-section2 */
	#parallax-section {
		& .content-section2{
			& .container{
				& h3{
				font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック",Verdana, Roboto, "Droid Sans", sans-serif;
				margin-top:2rem;
				font-size: 1.6rem;
				& > span{
					font-size: 1.2rem;
					}
				}
				& p{
					right: 0;
					margin-top:1rem;
					line-height: 2rem;
					font-size: 1.2rem;
					&:nth-last-child(1){
						width:65%;
						margin:1rem auto 2rem;
						line-height: 1rem;
						font-size: 1.1rem;
						&:hover{
							transform: scale(1.1);
							font-size: 1.3rem;
						}
					}
				}
				& a{
					& > img{
						width: 50%;
					}
				}
			}
		}
	}
	/* パララックス content-section3 */
	#parallax-section {
		& .content-section3{
			& .container{
				& h3{
				font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック",Verdana, Roboto, "Droid Sans", sans-serif;
				margin:0 auto;
				font-size: 1.6rem;
					& span{
						font-size: 1.1rem;
					}
				}
				& p{
					line-height: 1.8rem;
					font-size: 1rem;
				}
				& > .s_wrap{
					display: block;
					width: calc(100% - 10%);
					margin:0 auto ;
					& > .s_block{
						margin:1.5rem auto;
						text-align: center;
						background-color: #fff;
						& > a{
							& > img{
								width: 60%;
								height: auto;
								border-radius: 10%;
							}
						}
					}
				}
			}
		}
	}

	#parallax-section  .parallax-section2 .wrap{
		padding:0.5rem;
		}
	#parallax-section  .parallax-section3 .wrap{
		padding:1rem;
		}
	/* ▼content-section4 */
	#parallax-section .content-section4 {
		& .category_wrap{
			min-height: 100vh;
			width: calc(100% - 10%);
			margin:1rem auto;
			& > .c_wrap{
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 1.5rem;
				width: calc(100% - 10%);
				& > .c_block{
					border-radius: 5px;
					text-align: center;
					background-color: #fff;
					& > a{
						display: block;
						margin:0;
						color:#333;
						background-color: #fff;
						line-height: 1.5rem;
						font-family: "M PLUS Rounded 1c", メイリオ,Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
						font-weight: 200;
						font-style: normal;
						font-size:1rem;
						& > img{
							width: 100%;
							margin:0;
							border-radius: 5px 5px 0 0;
						}
					}
				}
			}
		}
	}

	/* ▼パララックス parallax-section4 */
	#parallax-section .parallax-section4{
	width: 100%;
		& div{
			width: 90%;
			& > a {
				margin:0 auto;
				line-height: 3rem;
				font-size:1.2rem;
				& > img{
					width: 95%;
					margin:0.5rem auto;
				}
			}
		}
	}

	/* ▼ミニスライダー*/
	.slider__wrapper {
		& .slider__list {
			&  li{
				--this-width: 100px;
				margin:calc(1rem);
				border:none;
				border-radius: 0;
				& > a{
					width:90%;
					font-size: 0.6rem;
					line-height: 1rem;
					border-radius: 0;
					&:hover{
						font-size: 1rem;
					}
				}
			}
			& img{
				border:#e5e5e5 solid 1px;
				border-radius: 0;
			}
		}
	}
	

	/* ▼プライバシーポリシー */


	/* ▼お問い合わせ */
	/* ▼フッター */
	footer {
		display: block;
		padding: 25px 10px;
		& #fNav{
			& >ul {
				display: block;
				width: 100%;
				padding-left:0;
				& > li{
					background-color: #ffffff;
					margin-bottom: 1px;
					border-right: none;
					position: relative;
					padding: 0;
					& > a{
						color: #2AA8E5;
						display: block;
						padding: 10px;
						&:hover{
							background-color: #fff;
							color: #2AA8E5;
							opacity: 1;
						}
						&:link {
							color: #2AA8E5;
							}
						&:visited{
							color: #2AA8E5;
						}
					}
					& > a::before{
						font-family: 'Font Awesome 5 Free';
						font-weight: 900;
						content: '\f35a';
						font-size:150%;
						position: absolute;
						top: 8px;
						right: 7px;
						color: #2AA8E5;
						width: 20px;
						height: 20px;
						line-height: 20px;
						padding: 0;
						text-align: center;
					}
				}
			}
		}
		& #copyright {
			text-align: center;
		}
	}
}

/* ------------------------------------------------ */
/* 380px以下に対応
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (max-width:380px)  and (max-height: 890px){

	/* ------------------------------------------------ */
	/* 2.レイアウト
	/* ------------------------------------------------ */
	/*TOPページheader部分*/
    #site-header{
      width: 85vw;
      grid-template-columns: 1fr 4fr;
      padding-top:1rem;
	  & div:first-child img{
		width:100%;
	  }
    }
    #site-header div:nth-of-type(2n){
	font-size: 0.8rem;
		span{
		font-size: 1.5rem;
		}
	}
	/*global navi*/
    .menu-icon {
      width: 35px;
      top: 1rem;
      right: 1rem;
    }

	/* ------------------------------------------------ */
	/* 4.コンテンツ
	/* ------------------------------------------------ */
	/*TOPページパララックス*/
	/* ▼parallax-section1 */
	#parallax-section .parallax-section1 .container{
		& p{
			font-size:1.5rem;
			text-shadow: 0 2px 10px rgba(0,0,0,.3);
		}
		& img{
			width: 80%;
		}
	}
	/* ▼パララックス parallax-section2・3 */
	#parallax-section {
		.parallax-section2,
		.parallax-section3{
			.text__motion{
				font-size: 1.2rem;
			}
		}
	}
	/* ▼パララックス parallax-section2 */
	#parallax-section .parallax-section2 .wrap{
		padding:0.5rem;
	}
	/* ▼パララックス parallax-section4 */
	#parallax-section .parallax-section4{
		width: 100%;
		& div{
			width: 90%;
			& > a {
				line-height: 2rem;
				font-size:1.1rem;
				& > img{
					width: 90%;
					margin:2rem auto;
				}
			}
		}
	}

	/* パララックス content-section2 */
	#parallax-section {
		& .content-section2{
			& .container{
				& p{
					font-size: 1.1rem;
					letter-spacing:-1px;
					&:nth-last-child(1){
						width:70%;
						font-size: 1.1rem;
						&:hover{
							transform: scale(1.1);
							font-size: 1.2rem;
						}
					}
				}
			}
		}
	}


	/* ▼パララックス content-section4 */
	#parallax-section .content-section4 {
		& .category_wrap{
			min-height: 100vh;
			width: calc(100% - 10%);
			margin:0 auto;
			& > .c_wrap{
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 1.5rem;
				width: calc(100% - 10%);
				& > .c_block{
					border-radius: 5px;
					text-align: center;
					background-color: #fff;
					& > a{
						display: block;
						margin:0;
						color:#333;
						background-color: #fff;
						line-height: 1.5rem;
						font-family: "M PLUS Rounded 1c", メイリオ,Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
						font-weight: 200;
						font-style: normal;
						font-size:1rem;
						& > img{
							width: 100%;
							margin:0;
							border-radius: 5px 5px 0 0;
						}
					}
				}
			}
		}
	}
}


/* ------------------------------------------------ */
/* スマホ横向き時 450px以下 */
/* ------------------------------------------------ */
@media screen and (orientation: landscape) and (max-height: 450px) {
	#parallax-section .parallax-section1 .container{
		& p{
			font-size:1.5rem;
			} 
		& img{
			width: 45%;
		}
	}
    .parallax-section2,
    .parallax-section3,
    .parallax-section4{
      height: 100vh;
    }
	/* ▼#parallax-section content-section2,3 */
	#parallax-section .content-section2 .container h3{
		margin-top:2rem;
		font-size: 1.6rem;
	}
	#parallax-section .content-section3 .container h3{
		font-size: 1.6rem;
	}
	#parallax-section .content-section3 .container h3 span{
		font-size: 1.1rem;
	}
	#parallax-section .content-section2 .container p,
	#parallax-section .content-section3 .container p{
		line-height: 1.8rem;
		font-size: 1rem;
	}
	#parallax-section .content-section2 .container p:nth-last-child(1){
		width:80%;
		margin:1rem auto 2rem;
		line-height: 1rem;
		font-size: 1.1rem;
		&:hover{
			transform: scale(1.1);
			font-size: 1.3rem;
		}
	}
	#parallax-section .content-section2 img,
	#parallax-section .content-section3 img{
		width: 50%;
	}
	#parallax-section .parallax-section2 .wrap{
		padding:2rem;
	}
	#parallax-section .text__motion{
	line-height: 1.5;
	font-size: 1.5rem;
	}
	#parallax-section  .parallax-section3 .wrap{
        padding:2rem;
    }
	/* ▼content-section4 */
	#parallax-section .content-section4 {
		& .category_wrap{
			min-height: 100vh;
			width: calc(100% - 10%);
			margin:0 auto;
			& > .c_wrap{
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 1.5rem;
				width: calc(100% - 10%);
				& > .c_block{
					border-radius: 5px;
					text-align: center;
					background-color: #fff;
					& > a{
						display: block;
						margin:0;
						color:#333;
						background-color: #fff;
						line-height: 1.5rem;
						letter-spacing: 0;
						font-family: "M PLUS Rounded 1c", メイリオ,Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
						font-weight: 100;
						font-style: normal;
						font-size:0.8rem;
						& > img{
							width: 100%;
							margin:0;
							border-radius: 5px 5px 0 0;
						}
					}
				}
			}
		}
	}
	#parallax-section .parallax-section4{
		width: 100%;
		& div{
			width: 80%;
			& > a {
				line-height: 2rem;
				font-size:1.2rem;
				& > img{
					width: 80%;
					margin:5px auto;
				}
			}
		}
	}
	/* ▼ミニスライダー*/
	.slider__wrapper {
		& .slider__list {
			&  li{
				--this-width: 200px;
				margin:calc(1rem);
				border:none;
				border-radius: 0;
				& > a{
					font-size: 1rem;
					line-height: 1.8rem;
					border-radius: 0;
					&:hover{
						font-size: 1.2rem;
					}
				}
			}
			& img{
				border:#e5e5e5 solid 1px;
				border-radius: 0;
			}
		}
	}
}
/* ------------------------------------------------ */
/* /* 画面が2つの領域に分割（開いた状態） */
/* ------------------------------------------------ */
@media (horizontal-viewport-segments: 2){
	/* ▼parallax-section2・3 */
	#parallax-section {
		.parallax-section2,
		.parallax-section3{
			.text__motion{
				font-size: 1.5rem;
			}
		}
	}
	/* ▼content-section4 */
	#parallax-section .content-section4 {
		& .category_wrap{
			min-height: 100vh;
			width: calc(100% - 30%);
			margin:0 auto;
		}
	}
	#parallax-section  .parallax-section2 .wrap{
		padding:2rem;
		}
	#parallax-section  .parallax-section3 .wrap{
		padding:3rem;
		}

	#parallax-section {
		& .content-section3{
			& .container{
				& > .s_wrap{
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					gap: 1.5rem;
					width: calc(100% - 15%);
					margin:0 auto ;
					& > .s_block{
						text-align: center;
						background-color: #fff;
						& > a{
							& > img{
								width: 100%;
								height: auto;
								border-radius: 50%;
							}
						}
					}
				}
			}
		}
	}
		
	/* ▼content-section4 */
	#parallax-section .content-section4 {
		& .category_wrap{
			min-height: 100vh;
			width: calc(100% - 10%);
			margin:0 auto;
			& > .c_wrap{
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 1.5rem;
				width: calc(100% - 10%);
				& > .c_block{
					border-radius: 5px;
					text-align: center;
					background-color: #fff;
					& > a{
						display: block;
						margin:0;
						color:#333;
						background-color: #fff;
						line-height: 2.5rem;
						font-family: "M PLUS Rounded 1c", メイリオ,Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
						font-weight: 200;
						font-style: normal;
						font-size:1rem;
						& > img{
							width: 100%;
							margin:0;
							border-radius: 5px 5px 0 0;
						}
					}
				}
			}
		}
	}
}