@charset "UTF-8";

@import "reset.css";



/*------------------------------------------------
	common
-------------------------------------------------*/
html{
	font-size:62.5%;
}
img{
	width:100%;
}
a{
	text-decoration:none;
	transition:0.3s;
}
a:hover {
	opacity:0.6;
}
.box{
	max-width:1000px;
	width:90%;
	margin-left:5%;
	line-height:1.5;
	font-size:1.6rem;
    font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
.mplusEB{
	font-family: 'M PLUS Rounded 1c', sans-serif;
}
.noto{
	font-family: 'Noto Sans', sans-serif;
}
.red{
	color:#FF4220;
}
.orange{
	color:#EB6100;
}
.flex{
	display: flex;
	flex-wrap:wrap;
}
.pc{
	display: none;
}
.sp{
	display: initial;
}

@media screen and (min-width:481px) {
	/*タブレット〜PC*/
	.box{
		margin-left: auto;
		margin-right: auto;
	}
	.pc{
		display: initial;
	}
	.sp{
		display: none;
	}
}


/*------------------------------------------------
	Howto
-------------------------------------------------*/
#howto{
	background-color:#FDE8D0;
	padding-bottom: 5rem;
}
#howto .logo{
	width: 25%;
	margin:2rem 0 0 2rem;
    display: inline-block;
}
#howto .main_title{
	width:80%;
	margin-left:10%;
	margin-top:4rem;
	margin-bottom:1rem;
}
#howto .note{
	background: url(../../files/img/bg_note.svg);
    background-size: 7.5%;
    position: relative;
    padding: 5rem 5% 1rem;
}
#howto .clip{
    position: absolute;
    top: -13px;
    width: 50px;
    right: 20px;
}
#howto .text-wrap{
    margin-bottom:4rem;
}
#howto h3{
	font-size:2.4rem;
	background: linear-gradient(transparent 60%, #FFF462 0%);
	font-weight: bold; 
	display: inline;
}
#howto h3 .size{
	font-size:2rem;
}
#howto .text-wrap .text{
	margin-top:2rem;
	line-height:2;
}
#howto .text-wrap .text span{
	font-weight: bold;
}
#howto .flow {
	margin-bottom: 4rem;
}
#howto .flow h4{
	font-size:2rem;
	font-weight: bold; 
	background-color:#CBE4B9;
	padding:0.5rem 1.5rem;
	display: inline-block;
	margin-bottom:1.5rem;
}
#howto .flow .flex{
	justify-content: center;
}
#howto .flow .text{
	font-size:1.4rem;
	background-color:#FFFDE5;
	border:2px dotted #009962;
	padding:1rem 1.5rem;
	line-height:2;
	border-radius:1rem;
	box-sizing: border-box;
}
#howto .flow .arrow{
	width:30px;
	line-height: 1;
}
#howto .check{
	margin-top:3rem;
}
#howto .check .title{
	align-items: center;
	margin-bottom:1rem;
}
#howto .check .title p{
	background: url(../../files/img/bg_check.svg);
    background-size: cover;
    width: 7rem;
    height: 6.8rem;
    color: #fff;
    padding-top: 2.5rem;
    box-sizing: border-box;
	font-size: 2.7rem;
	text-align:center;
	margin-right: 2rem;
	line-height: 1.5;
}
#howto .check .title h4{
	font-size:2.4rem;
	font-weight: bold;
	width: calc(100% - 9rem);
}
#howto .check p{
	font-size:1.4rem;
	line-height: 2;
}
#howto .check li{
	padding-bottom:3rem;
	margin-bottom:3rem;
	border-bottom:2px dotted #000;
}
#howto .check li:last-child{
	padding-bottom:0;
	margin-bottom:0;
	border-bottom:none;
}

@media screen and (min-width:481px) {
	/*タブレット〜PC*/
	#howto .logo{
		width: 94px;
		margin:2rem 0 0 2rem;
		display: inline-block;
	}
	#howto .main_title{
		width:50%;
		margin-left:25%;
	}
	#howto .note{
		background-size: 20px 20px;
	}
	#howto .text-wrap {
		margin-bottom: 6rem;
	}
	#howto .check{
		width: 80%;
		margin-left: 10%;
	}
	#howto .flow {
		margin-bottom: 6rem;
	}
	#howto .flow .flex {
		align-items: center;
	}
	#howto .flow .text{
		width:30.6%;
	}
	#howto .flow .arrow {
		width: 4%;
	}
	#howto .flow .arrow img{
		transform:rotate(-90deg);
	}
}


/*------------------------------------------------
	Use
-------------------------------------------------*/
#use{
	background: url(../../files/img/bg_cloth.svg);
	background-size: 7.5%;
	padding:5rem 0 3rem;
}
#use h2{
	max-width:500px;
	width:90%;
	margin-left:5%;
	margin-bottom:3rem;
}
#use .comment li{
	margin-bottom:3rem;
}
#use .balloon{
	position: relative;
	padding: 20px;
	background-color: #fff;
	border: 2px solid #EB6100;
	border-radius: 10px;
}
#use .balloon::before{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: calc(60% - 3px);
    bottom: -20px;
    border-top: 20px solid #EB6100;
    border-left: 20px solid transparent;
    border-right: 0px solid transparent;
}
#use .balloon::after{
	content: '';
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	left: 60%;
    bottom: -15px;
	border-top: 15px solid #fff;
    border-left: 15px solid transparent;
    border-right: 0px solid transparent;
}
#use .balloon h5{
	font-size:1.8rem;
	margin-bottom:1rem;
}
#use .balloon p{
	font-size:1.4rem;
	line-height:2;
}
#use .person{
	width:25%;
	margin-left: 70%;
    margin-top: -2.5rem;
    z-index: 2;
    position: relative;
}

@media screen and (min-width:481px) {
	/*タブレット〜PC*/
	#use{
		background-size: 40px 40px;
	}
	#use h2{
		max-width:500px;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:5rem;
	}
	#use .comment{
		justify-content: space-between;
	}
	#use .comment li {
		width: 48%;
	}
	
}


/*------------------------------------------------
	Link
-------------------------------------------------*/
#link{
	padding:5rem 0 3rem;
}
#link .akahon{
	margin-bottom:5rem;
}
#link .akahon li{
	width:90%;
	margin-left:5%;
	margin-bottom:2rem;
}
#link .akahon li a{
	width:100%;
	justify-content: space-between;
	padding:3rem 2rem;
	box-sizing: border-box;
	border:1px solid #D70A30;
	color:#000;
	font-weight: bold;
}
#link .akahon li a:after{
	/* content:">"; */
	content:url(../../files/img/icn_arrow.svg);
	display: inline-block;
	width:8px;
	height:13px;
}
#link .sns{
	justify-content: center;
}
#link .sns li{
	margin: 0 1%;
}

@media screen and (min-width:481px) {
	/*タブレット〜PC*/
	#link .akahon li{
		max-width: 400px;
		margin-left: 0;
		width: 48%;
	}
	#link .akahon {
		justify-content: space-between;
		max-width: 840px;
		margin-left: auto;
		margin-right: auto;
	}
	#link .akahon li a{
		font-size:1.8rem;
	}
	
}
/*------------------------------------------------
	Page Top
-------------------------------------------------*/
#pagetop{
	width:45px;
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 3;
	filter: drop-shadow(0px 3px 2px rgba(0,0,0,0.5));
}
#pagetop a{
	opacity:1;
}
@media screen and (min-width:481px) {
	/*タブレット〜PC*/
	#pagetop{
		width:80px;
	}
	
}

/*------------------------------------------------
	Footer
-------------------------------------------------*/
#footer{
	background:#333333;
	padding:2.5rem 0 5rem ;
}
#footer .box.flex{
	justify-content: center;
	align-items: center;
}
#footer .logo {
	text-align:center;
}
#footer .logo a{
	width: 35%;
	margin:0 auto 2rem;
    display: inline-block;
}
#footer .company{
	font-size:1.2rem;
	width:70%;
	margin:0 auto 3rem;
    justify-content: space-between;
}
#footer li a{
	color:#fff;
}
#footer .copylight{
	font-size:1.2rem;
	color:#fff;
	text-align:center;
}

@media screen and (min-width:481px) {
	/*タブレット〜PC*/
	#footer .logo a{
		max-width:132px;
		width: 100%;
		margin-bottom:0;
	}
	#footer .company{
		width: auto;
		margin-left: auto;
		margin-right: 2rem;
		margin-bottom:0;
	}
	#footer .company li{
		width: auto;
		margin-left: auto;
		margin-right: 2rem;
	}
}