@charset "UTF-8";

/*文字の設定*/
.strong {
  background:linear-gradient(transparent 60%, #fff878 60%) !important;
}

.underlinewhite{
  background:linear-gradient(transparent 60%, #ffffff 60%) !important;
}

h1, h2, h3, h4, h5{
	font-family: 'Jost', sans-serif;
}

h2, h3, h4, h5{
	font-weight:500;
}

p, ul li, ol li, a{
	font-family: 'Noto Sans JP', sans-serif;
}

h1{
	letter-spacing:3px;
	line-height:1.8;
	font-size:25px;
	color:#000;
	font-weight:800;
}

p{
	font-size:13px;
	color:#333333;
}

.top-caption p:first-of-type{
	margin-bottom:20px;
}

.big-wrapper{
	width:100%;
}

.mid-wrapper, .first-wrapper, .second-wrapper{
	width:900px;
	margin:auto;
	padding:70px 0;
}

.first-bg{
	background-color:#fff5ee;
}

.second-bg{
	background-color:#dbebc4;
}

.tshirt-img, .tshirt-img h2, .tshirt-img .item-list li{
	text-align: center;
}

.tshirt-img{
	width:800px;
	margin:0 auto 40px;
	padding:10px 0;
	background-color:#fff;
}

.first-wrapper .tshirt-img{
	border:solid 4px #f6ae54;
}

.second-wrapper .tshirt-img{
	border:solid 4px #89c997;
}

.first-wrapper h1, .second-wrapper h1{
text-align: center;
  position: relative;
  display: inline-block;
  margin-bottom:10px;
  font-weight:normal;
  font-size:50px;
  width:100%;
  color:#666;
}

.first-wrapper h1:before , .second-wrapper h1:before{
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #ccc;
  border-radius: 2px;
  margin-bottom:10px;
}

.tshirt-img img{
	width:40%;
	margin:30px 0;
}

.tshirt-img h2{
	font-size:16px;
}

.styling-box{
	padding:20px;
	background-color:#fff;
}

.styling-box h2{
	font-size:40px;
	text-align: center;
	margin-bottom:20px;
}

.first-wrapper .styling-box h2{
	color:#e49a42;
}

.second-wrapper .styling-box h2{
	color:#7b8d42;
}

.styling-box .item-list h3{
	font-size:15px;
}

.first-wrapper .styling-box .item-list h3{
	color:#e49a42;
}

.second-wrapper .styling-box .item-list h3{
	color:#7b8d42;
}

.item-list li a{
	letter-spacing:2px!important;
}

.item-list li a:after{
	font-size:13px;
	margin-left:4px;
}

.first-wrapper .moji-bg{
	background-color:#fff5ee;
  background-position: 0%;
}

.second-wrapper .moji-bg{
  background-color:#dbebc4;
  background-position: 0%;
}

.st-flex-box{
	display:flex;
	height: auto;
	align-items: center;
	justify-content: space-between;
}

.coordinate-img{
	width:50%;
}

.st-flex-box .item-list{
	width:48%;
	padding:30px 20px;
}

.comment {
	width:700px;
    position: relative;
    padding:20px 30px;
	margin:30px auto;
}

.comment:before,.comment:after{ 
    content:'';
    width: 50px;
    height: 50px;
    position: absolute;
    display: inline-block;
}

.comment:before{
    top:0;
    left: 0;
}

.first-wrapper .comment:before{
    border-left: solid 5px #f6ae54;
    border-top: solid 5px #f6ae54;
}

.second-wrapper .comment:before{
    border-left: solid 5px #89c997;
    border-top: solid 5px #89c997;
}

.comment:after{
    bottom:0;
    right: 0;
}

.first-wrapper .comment:after{
    border-right: solid 5px #f6ae54;
    border-bottom: solid 5px #f6ae54;
}

.second-wrapper .comment:after{
    border-right: solid 5px #89c997;
    border-bottom: solid 5px #89c997;
}

.comment p {
    margin: 0; 
    padding: 0;
}

.slide-box{
	width:700px;
	margin:30px auto;
	padding:40px 0;
}

.colorbar{
	width:160px;
	height:3px;
	margin:50px auto;
}

.first-wrapper .colorbar{
	background-color:#f6ae54;
}

.second-wrapper .colorbar{
	background-color:#89c997;
}

.jiko_soto{
	background-color:#fffff4;
}

.name h5{
	color:#fac559;
}

.sp-swipe{
	display:none;
}

/*タブレット用*/
@media screen and (max-width: 768px){
	.mid-wrapper, .first-wrapper, .second-wrapper{
		width:650px;
	}
	
	.tshirt-img, .slide-box, .comment{
		width:500px;
	}
	
	.sp-swipe{
		display:inline-block;
		width:100%;
		text-align: right;
		margin-top:20px;
	}
	
	.sp-swipe img{
		width:40%;
	}

}

/*スマホ用*/
@media screen and (max-width:640px){

	.first-wrapper, .second-wrapper{
		width:350px;
	}
	
	.mid-wrapper{
		width:320px;
	}
	
	.first-wrapper h1, .second-wrapper h1{
		font-size:30px;
	}
	
	.tshirt-img{
		width:300px;
		padding:15px;
	}
	
	.item-list{
		width:300px!important;
	}
	
	.tshirt-img .item-list li{
		text-align: center!important;
		width:280px!important;
	}
	
	.tshirt-img img{
		width:85%;
		padding-top:20px;
	}
	
	.styling-box h2{
		font-size:30px;
	}
	
	.coordinate-img{
		width:100%;
	}
	
	.comment, .slide-box{
		width:100%;
	}
	
	.st-flex-box{
		display:block;
	}
	
	.sp-swipe img{
		width:60%;
	}


}

/* CSS Document */