@charset "utf-8";
/* 20240626 */
body#flow{
	display: flex;
	flex-direction: column;
	align-items: center;
	}
/* --------------------------------------------- */
/* ------------------- main -------------------- */
/* --------------------------------------------- */
body#flow main article{
	display: flex;
	justify-content: center;
	width: 100vw;
	position: relative;
}
body#flow main article .inner_width{
	display: flex;
	flex-direction: column;
	margin: calc(10vw + 4em) auto calc(4vw + 4em);
	width: 80vw;/*各スライダー全体の横幅(4箇所)と共通*/
	max-width: 1200px;
	}
	body#flow main article:nth-last-of-type(2) .inner_width{
			margin-bottom: calc(10vw + 6em);
		}

body#flow main article#foreword{background-color: var(--color_l02);}
body#flow main article#flows{background-color: var(--color_l02);}
body#flow main article#options{background-color: var(--color_l01);}

/*==================================================
foreword
===================================*/
body#flow main article#foreword .inner_width{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 0;
	}
body#flow main article#foreword .inner_width h2{
	font-family: "WindSong", cursive, 'Noto Sans JP', sans-serif,"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
	font-size: 3em;
	color: #aaa;
    transform: rotate(-6deg);
	margin-bottom: .8em;
	position: relative;
	}
	#underline {
		display     : inline-block;    /* 変形するためのブロック化 */
		line-height : 1em;             /* 行の高さ */
		transform   : rotate(3deg) scale(16, 0.5);   /* 変形 横,縦 */
		position: absolute;
		left: 1.4em;
		bottom: -.3em;
		}
body#flow main article#foreword .inner_width h1{
	line-height: 1.6em;
	margin-bottom: 1.6em;
	}
body#flow main article#foreword .inner_width h1 span{
	display: inline-block;
	}
body#flow main article#foreword .inner_width p{
	margin-bottom: 1.4em;
	}
body#flow main article#foreword .inner_width p span{
	line-height: 2em;
	display: inline-block;
	}

/*==================================================
flows-01/02
===================================*/
body#flow main article#flows .inner_width{
	margin-top: 2em;
	}

/*==================================================
tab
===================================*/
.tab-wrap{
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 0 0 20px;
	max-width: 900px;
}

.tab-label {
	color: #aaa;
	cursor: pointer;
	flex: 1;
	font-weight: bold;
	order: -1;
	padding: 12px 24px;
	position: relative;
	text-align: center;
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
	user-select: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

.tab-label:hover {
	background: rgba(78,78,78,.2);
}

.tab-switch:checked + .tab-label {
	color: var(--color_d02);
}

.tab-label::after {
	background: #333;
	bottom: 0;
	content: '';
	display: block;
	height: 3px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(100%);
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
	width: 100%;
	z-index: 1;
}

.tab-switch:checked ~ .tab-label::after {
	transform: translateX(-100%);
}

.tab-switch:checked + .tab-label::after {
	opacity: 1;
	transform: translateX(0);
}

.tab-content {
	height:0;
	opacity:0;
	padding: .6rem 0;
	pointer-events:none;
	transform: translateX(-30%);
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
}

.tab-switch:checked ~ .tab-content {
	transform: translateX(30%);
}

.tab-switch:checked + .tab-label + .tab-content {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}

/*.tab-wrap::after {
	content: '';
	height: 20px;
	order: -1;
	width: 100%;
}*/

.tab-switch {
	display: none;
}


/*==================================================
accordion
===================================*/
.accordion {
width: 100%;
max-width: 900px;
}
.toggle {
display: none;
}
.option {
position: relative;
margin-bottom: 1em;
}
.title,
.ac_content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.title {
border: solid 1px #ccc;
padding: 1em;
display: block;
color: #333;
font-weight: bold;
}
.title::after,
.title::before {
content: "";
position: absolute;
right: 1.25em;
top: 1.25em;
width: 2px;
height: 0.75em;
background-color: #999;
transition: all 0.3s;
}
.title::after {
transform: rotate(90deg);
}
.ac_content {
max-height: 0;
overflow: hidden;
}
.ac_content .ac_inner{
padding:1em;
}
.ac_content p {
margin: 0 0 .8em;
line-height: 1.6;
}
.toggle:checked + .title + .ac_content {
max-height: 500px;
transition: all 1.5s;
}
.toggle:checked + .title::before {
transform: rotate(90deg) !important;
}

/*==================================================
flows-02/02
===================================*/
body#flow main article#flows .accordion button{
	background-color:var(--color_d01);
	color:#fff;
	display: flex;
	flex-direction: row;
	align-items: center;
	border: none;
	padding:1em;
	margin: 1em 0;
	}



/*==================================================
options
===================================*/
body#flow main article#options .inner_width {
    display: flex;
	flex-direction: column;
	align-items: center;
    }
body#flow main article#options h1{
	margin-bottom: 1em;
	text-align: center;
	}
body#flow main article#options h2{margin-bottom: 1em;}
body#flow main article#options h3{margin-bottom: .6em;}

body#flow main article#options div.inner_width{
    margin-top: calc(3vw + 2em);
	}
body#flow main article#options div.inner_width div[class^="service"]{
    margin-top: 1em;
	padding: 1em 1em 1em 2.4em;
	border: 1px dotted red;
	}


/*==================================================
波線区切りエリア https://www.shapedivider.app/
===================================*/
.bg_wavy_l01,.bg_wavy_l02 {
    position: absolute;
	bottom: calc(0px - 4vw - 4em);
    width: 100vw;
    overflow: hidden;
    line-height: 0;
	z-index: 1;
}
.bg_wavy_l01 svg,.bg_wavy_l02 svg {
    position: relative;
    display: block;
    width: calc(144% + 1.3px);
    height: calc(4vw + 4em);
}
.bg_wavy_l01 .shape-fill {fill: var(--color_l01);}
.bg_wavy_l02 .shape-fill {fill: var(--color_l02);}

/* --------------------------------------------- */
/* -------------------- 横長 -------------------- */
/* --------------------------------------------- */
/* 横長 */
@media (orientation: landscape){
body#flow main article .inner_width{
	width: 86vw;
	max-width: 900px;
	}
	body#flow main article:first-of-type .inner_width{
			margin-top: calc(4vw + 4em);
		}

/*==================================================
options
===================================*/
body#flow main article#options div.inner_width{
    margin-top: calc(2vw + 2em);
	}
body#flow main article#options div.inner_width div[class^="service"]{
    display: flex;
	flex-direction: row;
	width: 26em;
	}
	body#flow main article#options div.inner_width div[class^="service"] ul:first-of-type{
		margin-right: 3em;
		}
}