/* IMPORT RESET ================================================== */
@import url("sanitize.css");

/* WEB FONT ====================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css");

/* 変数設定 ======================================================== */

/*共通のサイズや色を変数で設定
　変数を使う時は数値で入れる箇所を var(--red) のように記載*/
:root{
	/*文字サイズ*/
	--x-small:0.8rem;/*50%*/
	--small:1.2rem;/*75%*/
	--medium:1.6rem;/*100%*/
	--large:2rem;/*125%*/
	--x-large:2.4rem;/*150%*/
	--xx-large:3.2rem;/*200%*/
	/*色*/
	--red:#c00;
	--blue:#039;
	--mallcolor:#b60081;
}

/* STYLES ======================================================== */

/* ルートのフォントサイズを10pxに設定（1rem=10px）*/
html {
  font-size: 62.5%;
}

/* bodyのフォントサイズを16pxに設定 */
body {
  font-size: 1.6rem;
}

/* MEMO ++++++++++++++++++++++++++++++++
  フォントサイズはremで指定すること
  例）10pxは1rem、12pxは1.2rem
+++++++++++++++++++++++++++++++++++++ */

.font-xs{
  font-size: var(--x-small);
}

.font-s{
  font-size: var(--small);
}

.font-m{
  font-size: var(--medium);
}

.font-l{
  font-size: var(--large);
}

.font-xl{
  font-size: var(--x-large);
}

/*文字色*/
.font-red{
  color: var(--red);
}

.font-blue{
  color: var(--blue);
}

.font-mcolor{
  color: var(--mallcolor);
}


*{
  box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  margin: 0;
  padding: 0;
	color: #333;
}

/*下記marginやpadding、widthはサイトデザインに合わせて調整*/

header{
  margin: 0;
  padding: 0;
	
	h1{
		margin: 0;
		background-image: url("../img/title_bg.png");
		background-size: cover;
		@media (min-width: 768px){
			/*PCのみ適用*/
			height: 70vh;
			min-height: 300px;
			text-align-last: center;
			
			img{
				width: auto;
				height: 100%;
			}
		}
	}
}


main{
  margin: 0;
  padding: 10px 0;
  background-color: #fff;
	
	section{
		margin: 0 auto;
		max-width: 980px;
	}
	
	article{
		background-color: #dbdcdc;
	}
}

footer{
  margin: 0;
  padding: 10px;
  background-color: #999;
	color: #fff;
  text-align: center;
	position: sticky;
	bottom: 0;
	z-index: 10;
	font-size: var(--large);
	
	p{
		padding: 0;
		margin: 0;
		z-index: 20;
	}
}

/*リンクボタン ─────────────*/
a.btn{
	display: block;
	margin: 1em auto;
	padding: 10px;
	font-weight: bold;
	background-color: #00909e;
	font-size: var(--x-large);
	color: #fff;
	text-decoration: none;
	width: 60%;
	max-width: 900px;
	border-radius: 10px;
	text-align: center;
	z-index: 10;
	box-shadow: 0 0 0 3px #00909e;/*ボタンの背景色に合わせる*/
	border: 2px solid #fff;
	
}


a.homeBtn{
	display: block;
	margin: 1em auto;
	padding: 10px;
	font-weight: bold;
	background-color: var(--mallcolor);
	font-size: var(--x-large);
	color: #fff;
	text-decoration: none;
	width: 90%;
	max-width: 900px;
	border-radius: 10px;
	text-align: center;
	z-index: 10;
	box-shadow: 0 0 0 3px var(--mallcolor);/*ボタンの背景色に合わせる*/
	border: 2px solid #fff;
}

/*光るリンクボタン ─────────────*/
a.btn-shine {
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	border-radius: 5px;
	text-decoration: none;
}
a.btn-shine::before {
	display: block;
	position: absolute;
	top: -50%;
	left: -30%;
	transform: rotate(30deg);
	width: 70px;
	height: 140px;
	content: '';
	background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
	background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
	animation: animation-btn-shine 3s infinite linear;
}
@keyframes animation-btn-shine {
	17% {
		left: 120%;
	}
	100% {
		left: 120%;
	}
}

/*画像は基本的に横幅100%表示、高さは横幅に合わせて自動調整
  小さい画像を使用する際は個別にmax-widthを設定する*/
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  image-rendering: -webkit-optimize-contrast;　/*Chromeで画像がぼやけるのを防止*/
}

/*Flexbox ────────────────────────────────────────────────────────────
　表示数が足りない時は左寄せ。
　子要素の右に10pxのマージン。右端にくる分は親要素のmargin-right: -10pxで相殺
　※均等配置にしたい場合は上記設定を削除し、flexboxにjustify-content: space-betweenを設定し
　子要素のwidthの計算式で100%から引く数値を10px減らす
　※記事の間隔は10px設定なので、間隔を変更する場合は関連箇所の数値を調整
*/
.flexbox{
  display: flex;
  flex-wrap: wrap;
	justify-content: space-around;
}

/*PC・スマホ共に2分割　※flexと一緒に設定
計算式（calc）の中の10px部分は「marginの右余白の数値」と「flexboxのmargin-rightでマイナスした数値」と同じ数値にする*/
.box2 > div,
.box2 > p{
  width: calc( ( 100% - 10px * 2 ) / 2 );
  margin: 0 10px 10px 0;
}

/*PC2列、スマホ1列　※flexと一緒に設定*/
.box2-1 > div,
.box2-1 > p{
  width: 100%;
  margin: 0 10px 10px 10px;
}
@media (min-width: 768px){
/*PCのみ適用*/
  .box2-1 > div,
  .box2-1 > p{
    width: calc( ( 100% - 40px ) / 2 );
  }
}

/*Section1 ───────────────────────────────────────────────────────────*/
#sec01{
	h2{
		background: url("../img/sec1_h2_bg.png") no-repeat left top;
		background-size: 3em;
		padding: 1em 0 0 1em;
		font-size: var(--x-large);
		letter-spacing: 0.2em;
		margin: 1em 0 0 10px;
	}
	p.answer{
		background: url("../img/sec1_p_bg.png") no-repeat left top;
		background-size: 2.5em;
		padding: 0.5em 0 0 0;
		font-size: var(--x-large);
		letter-spacing: 0.1em;
		font-weight: bold;
		margin: 1em 0 0 10px;
		text-align: center;
		line-height: 1.2;
	}
	table{
		border-collapse: separate;
		border-spacing: 5px;
		margin: 0 0 0 2em;
	}
	@media (max-width: 767px){
		table{
			margin: 0 auto;
		}
	}
	td{
		width: 7.5em;
		height: 4.5em;
		text-align: center;
		background: linear-gradient(-30deg, #dbdcdc 0%, #dbdcdc 50%, #e2e3e3 50%, #e2e3e3 100%);
		font-weight: bold;
	}
	
	.flexbox{
		background: url("../img/sec1_arrow.png") no-repeat center center;
		background-size: 5em;
	}
	@media (max-width: 767px){
		/*スマホ*/
		p.answer{
			margin-top: 3em;
			letter-spacing: 0;
		}
		.flexbox{
			background: url("../img/sec1_arrow_sp.png") no-repeat center center;
			background-position: 50% 47%;
		}
	}
}

/*Section2
───────────────────────────────────────────────────────────*/
#sec02{
	background:
		url(../img/sec2_bg_1.png)5% 90% / contain no-repeat,
		url(../img/sec2_bg_2.png)95% 90% / contain no-repeat;
	background-size: 25%;
	padding: 0 0 2em 0;
	
	.triangle {
		background: #fff;
		height: calc(40px / 2);
		width: 40px;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		margin: 0 auto;
	}
	.flexbox{
		margin:  2em 0 0 0 ;
		p{
			color: #fff;
			padding: 10px 10px 10px 3em;
			font-size: var(--x-large);
			font-weight: bold;
			text-align: center;
			line-height: 1.2;
			width: 17em;
		}
		p:nth-child(1){
			background: url("../img/sec2_p_bg_1.png") no-repeat 10px center #00909e;
			background-size: 2.5em;
			letter-spacing: 0.1em;
		}
		p:nth-child(2){
			background: url("../img/sec2_p_bg_2.png") no-repeat 10px center #00909e;
			background-size: 2.5em;
		}
	}
	p.catch{
		font-size: var(--large);
		text-align: center;
		font-weight: bold;
		
		span.highlight{
			color: var(--mallcolor);
			font-size: var(--xx-large);
		}
	}
}

/*Section3
───────────────────────────────────────────────────────────*/
#sec03{
	padding: 3em 1em 2em 1em;
	
	h3{
		color: var(--mallcolor);
		font-size: var(--large);
	}
	
	ol {
		padding: 0px;
    margin: 0px;
    list-style: none;
    counter-reset: list_circle_num_counter;
	}
	li {
		position: relative;
    padding: 0px 0px 0px 1.6em;
    counter-increment: list_circle_num_counter;
		font-weight: bold;
	}
	li::before {
		display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-47%);
    width: calc(1.3em);
    height: calc(1.3em);
    background-color: #00909e;
    color: #fff;
    font-weight: bold;
    border-radius: 50%;
    text-align: center;
    line-height: 1;
    content: counter(list_circle_num_counter);
	}
	li + li {
		margin: 0.5em 0px 0px;
	}
}

/*Section4 ───────────────────────────────────────────────────────────*/
main > h2{
	color: var(--mallcolor);
	font-size: var(--x-large);
	text-align: center;
	background-color: #dbdcdc;
	
	div{
		width: 27em;
		margin: 0 auto;
		position: relative;
		
		img{
			position: absolute;
			height: 3em;
			width: auto;
			left: 2em;
			top:-1em;
		}
	}
}

@media (max-width: 767px){
	main > h2{
	font-size: var(--large);
	text-align: center;
	background-color: #dbdcdc;
	
	div{
		width: 100%;
		margin: 0 auto;
		position: relative;
		padding-left: 2em;
		
		img{
			position: absolute;
			height: 2.5em;
			width: auto;
			left: 1em;
			top:-0.5em;
		}
	}
}
}

#sec04{
	padding: 3em 1em 2em 1em;
	position: relative;
	
	p.map{
		position: absolute;
		right: 10px;
		top:-5.5em;
		width: 25%;
	}
	@media (max-width: 767px){
	/*スマホ*/
		padding-top: 1em;
		p.map{
			display: none;
		}
	}
	
	.flexbox{
		width: 100%;
		align-items: flex-start;
		
		table{
			width: 50%;
			border-collapse: separate;
			border-spacing: 5px;
			
			th{
				clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
				background-color: #dbdcdc;
				white-space: nowrap;
				width: 7.5em;
				letter-spacing: 1em;
				padding: 0 10px 0 5px
			}
		}
		@media (max-width: 767px){
		/*スマホ*/
			table{
				width: 100%;
			}
		}
	}
}

/*Section5
───────────────────────────────────────────────────────────*/
#sec05{
	background:
		url(../img/sec5_bg_1.png)5% 70% / contain no-repeat,
		url(../img/sec5_bg_2.png)95% 70% / contain no-repeat;
	background-size: 20%;
	@media (max-width: 767px){
		/*スマホ*/
		background-size: 30%;
	}
	padding: 2em 1em;
	
	p{
		text-align: center;
	}
	.whitebox{
		margin: 1em auto 0 auto;
		width: 90%;
		background: linear-gradient(180deg,#dbdcdc 0%,#dbdcdc 15px,#fff 15px,#fff 100%);
		position: relative;
		
		.flexbox{
			background: url("../img/sec5_arrow_pc.png") no-repeat 50% 60%;
			background-size: 1em;
			align-items: center;
			
			@media (max-width: 767px){
				/*スマホ*/
				background: url("../img/sec5_arrow_sp.png") no-repeat 53% 60%;
				background-size: 7%;
			}
			margin-left: -1.5em;
			div:nth-child(1){
				background: url("../img/sec5_div_bg_1.png") no-repeat left top;
				background-size: 15%;
				padding: 0.5em 0 0 1em;
				
				ul{
					margin: 1.5em 0 calc( 1.5em - 15px ) 0;
				}
			}
			div:nth-child(2){
				background: url("../img/sec5_div_bg_2.png") no-repeat left top;
				background-size: 15%;
				padding: 1.5em 0 0 1em;
				font-weight: bold;
				text-align: center;
				font-size: var(--large);
				@media (max-width: 767px){
					padding: 0 0 0 1em;
				}
			}
		}
	}
	.triangle {
		background: #fff;
		height: calc(40px / 2);
		width: 40px;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		margin: 0 auto;
	}
	
	p.catch{
		font-size: var(--x-large);
		text-align: center;
		font-weight: bold;
		color: var(--mallcolor);
	}
}

/*Section6
───────────────────────────────────────────────────────────*/
#sec06{
	padding: 2em 0;
	
	h2{
		text-align: center;
	}

	div.step{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		
		div{
			width: 21%;
			aspect-ratio: 1;
			text-align: center;
			background: linear-gradient(135deg, #b2dacb 0%, #b2dacb 50%, #9dcdba 50%, #9dcdba 100%);
			font-weight: bold;
			position: relative;
			
			:after{
				content: url(../img/sec6_arrow_pc.png);
				position: absolute;
				top: 45%;
				right: -20px;
			}
			
			h3{
				border-bottom: 1px solid #fff;
				width: 7em;
				margin: 0.5em auto 1em auto;
				font-weight: normal;
				font-size: var(--large);
				
				span{
					font-size: var(--x-large);
				}
			}
			
			.icon{
				width: 50%;
				margin: 0 auto;
				display: grid;
				place-items: center;
			}
		}
	}
	
	
	div.step > div:last-child{
		width: 10%;
		background: #00909e;
		color: #fff;
		writing-mode: vertical-rl;
		font-size: var(--x-large);
		display: grid;
		place-items: center;
		
		:after{
			content: none;
		}
	}
	@media (max-width: 767px){
	/*スマホのみ適用*/
		div.step{
			width: 80%;
			margin: 1em auto;
			
			div{
				width: 100%;
				display: flex;
				height: 3em;
				margin-bottom: 1em;
				position:relative;
				padding:5px;
				
				:after{
					content: none;
				}
				
				h3{
					border-bottom: none;
					border-right: 1px solid #fff;
					margin: 0;
				}
				
				p{
					width: 70%;
					margin: 0;
					padding: 0.5em 0;
					text-align: left;
				}
				
				.icon{
					width: 4.5em;
					height: auto;
					padding: 0.5em 1em;
				}
			}
		}
		
		div.step > div:after{
			content: url(../img/sec6_arrow_sp.png);
			position: absolute;
			bottom: -2em;
			left: 45%;
		}
		div.step > div:last-child{
			width: 100%;
			writing-mode: horizontal-tb;
			height: 2em;
			line-height: 1;
			
			p{
				text-align: center;
				margin: 0;
			}
			
			:after{
				content: none;
			}
		}
		
		div.step > div:last-child:after{
			content: none;
		}
	}
}

/*アニメーション
──────────────────────────────────────────────────*/

.inview-fadeInRight,
.inview-fadeInUp,
.inview-bounce{
  opacity: 0;
}

.fadeInRight{
  animation: fadeInRight;
}
.fadeInUp{
  animation: fadeInUp;
}

.fadeIn1s{
  animation-duration: 1s;
}
.fadeIn2s{
  animation-duration: 2s;
}

.fadeIn3s{
  animation-duration: 3s;
}

.fadeIn4s{
  animation-duration: 4s;
}

.fadeIn5s{
  animation-duration: 5s;
}

.bounce{
  animation: bounce;
  animation-duration: 1s;
}

/*ページトップスクロール ──────────────────────────────────────────────────*/
#page-top {
  position: fixed;
  bottom: 10px;
  right: 10px;
  font-size: var(--small);
  width: 20%;
  max-width: 50px;
  z-index: 1000;
}
#page-top img {
  width: 100%;
}
/* ▲ページトップスクロールここまで▲ */

/* スマホなど幅が足りなくなったらspanで囲った単位で強制改行
   spanで囲まれている文章は自動改行がされなくなるので要注意*/
.spBr span{
  display: inline-block;
  white-space: nowrap;
}