@charset "UTF-8";
/* CSS Document */
*{
  box-sizing: border-box;
}
html{
  font-size: 62.5%; 
}
body{
  -webkit-text-size-adjust: 100%;
  font-size: 1.6rem;
  color: #000;
  font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  line-height: 1.6;
}
img{
  width: 100%;
  max-width: 100%;
  height: auto;
}
.text{
  text-align: justify;
  text-justify: inter-ideograph;
}
header{
	height: 640px;
	position: relative;
	overflow: hidden;
}
header .headerBg{
	width: 500%;
	height: 500%;
	position: absolute;
	top: -250%;
	left: -250%;
	background: url(../images/index_bg01.jpg);
	background-size: 308px 269px;
	transform: rotate(30deg);
}
header .headerInner{
	position: absolute;
	top: 0;
	left: 0;
 width: 100%;
 margin: 0 auto;
	padding: 40px 20px;
 text-align: center;
}
header .copy{
 animation: slide .5s ease-in-out;
 text-align: left;
}
@keyframes slide{
 0%{
  transform: translateX(-100%);
 }
 100%{
  transform: translateX(0);
 }
}
header .copy img{
	width: auto;
	height: 57px;
}
header .copy p:nth-of-type(n+2){
	margin-top: 15px;
}
header .bigT{
	display: inline-block;
	position: relative;
 max-width: 369px;
	margin-top: 55px;
	text-align: center;
}
header .bigT::before{
	position: absolute;
	display: block;
	content: "";
	width: 35%;
 height: 44%;
 top: -19%;
 right: -1%;
	background-image: url(../images/fukidashi01.png);
	background-repeat: no-repeat;
	background-size:  contain;
 animation: fukidashi1 .5s ease-in-out,fukidashi2 2s infinite ease-in-out 1s alternate;
}
header .bigT::after{
	position: absolute;
	display: block;
	content: "";
	width: 35%;
	height: 44%;
	top: 65%;
  left: -1%;
	background-image: url(../images/fukidashi02.png);
	background-repeat: no-repeat;
	background-size:  contain;
 animation: fukidashi1 .5s ease-in-out,fukidashi2 2s infinite ease-in-out .5s alternate;
}
@keyframes fukidashi1{
 0%{
  transform: scale(0,0);
 }
 70%{
  transform: scale(1.1,1.1);
 }
 100%{
  transform: scale(1,1);
 }
}
@keyframes fukidashi2{
 0%{
  transform: rotate(0);
 }
 100%{
  transform: rotate(15deg);
 }
}
main{
	margin: 25px 0 30px;
}
h1 img{
	width: 327px;
}
.intro{
	margin: -25px 20px 0;
	padding: 50px 15px 20px;
	border: 1px solid #000;
	border-radius: 25px;
}
.intro p:nth-of-type(n+2){
	margin-top: 8px;
}
.circleBox{
	margin: 70px 38px 45px;
}
.t-shirt img{
 width: 80%;
}
.circleBox .t-shirt{
 position: relative;
}
.circleBox .t-shirt:nth-of-type(2n+1)::before{
 position: absolute;
 display: block;
 content: "";
 width: 82%;
 height: 122%;
 top: -11%;
 left: 0%;
 background: #ffe100;
 border-radius: 50%;
 z-index: -1;
}
.circleBox .t-shirt:nth-of-type(2n+1)::after{
 position: absolute;
 display: block;
 content: "";
 width: 27%;
 height: 135%;
 top: -43px;
 right: -10px;
 background-image: url("../images/index_tx01.png");
 background-size: contain;
 background-repeat: no-repeat;
}
.circleBox .t-shirt:nth-of-type(2n){
 margin-top: 16%;
 text-align: right;
}
.circleBox .t-shirt:nth-of-type(2n)::before{
 position: absolute;
 display: block;
 content: "";
 width: 82%;
 height: 122%;
 top: -11%;
 right: -1%;
 background: #ffe100;
 border-radius: 50%;
 z-index: -1;
}
.circleBox .t-shirt:nth-of-type(2n)::after{
 position: absolute;
 display: block;
 content: "";
 width: 24%;
 height: 103%;
 top: 14px;
 left: -10px;
 background-image: url("../images/index_tx02.png");
 background-size: contain;
 background-repeat: no-repeat;
}
.btnWrap{
 text-align: center;
 margin: 11% 0 27%;
}
.btn{
 display: inline-block;
	position: relative;
	width: 50%;
 text-align: center;
 transition: 1s;
}
.btn::before{
	position: absolute;
	display: block;
	content: "";
	width: 27%;
 height: 193%;
	top: 70%;
	left: 36%;
	background-size: contain;
	background-image: url(../images/shippo.png);
	background-repeat: no-repeat;
	z-index: -1;
 transform-origin: center top;
 animation: tiger 3s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}
@keyframes tiger{
 0%,100%{
  transform: rotate(20deg);
 }
 50%{
  transform: rotate(-10deg);
 }
}
section{
 position: relative;
}
section:nth-of-type(n+2){
 margin-top: 50px;
}
section::before{
 position: absolute;
 display: block;
 content: "";
 width: 75%;
 height: 130px;
 top: 30px;
 right: 0;
 background: #ffe100;
 z-index: -1;
}
.featureBox section:nth-child(1) h2{
 width: 362px;
}
.featureBox section:nth-child(2) h2{
 width: 272px;
}
.featureBox section:nth-child(4) h2{
 width: 289px;
}
.featureBox section:nth-child(5) h2{
 width: 319px;
}
section .text{
 margin: 25px 20px 0;
}
section p:nth-of-type(n+2){
 margin-top: 8px;
}
.slideWrap{
 position: relative;
 -webkit-display: flex;
 display: flex;
 margin-top: 50px;
 padding: 30px 0;
 overflow: hidden;
 background: #ffe100;
}
.slideWrap .slide{
 -webkit-display: flex;
 display: flex;
 align-items: -webkit-center;
 align-items: center;
 flex-shrink: 0;
}
.slideWrap .slide:first-child{
 animation: t-slide1 60s -30s linear infinite;
}
.slideWrap .slide:last-child{
 animation: t-slide2 60s linear infinite;
}
.slideWrap .slide .t-shirt{
 display: inline-block;
 margin-right: -200px;
}
.slideWrap .slide .t-shirt img{
 width: 60%;
}
@keyframes t-slide1{
 0%{
  transform: translateX(100%);
 }
 100%{
  transform: translateX(-100%);
 }
}
@keyframes t-slide2{
 0%{
  transform: translateX(0);
 }
 100%{
  transform: translateX(-200%);
 }
}
.outro{
 margin-top: 60px;
 text-align: center;
 font-weight: bold;
}
footer{
 padding: 30px 0;
 background: #000;
 color: #fff;
 text-align: center;
}

@media screen and (min-width: 900px){
body{
  font-size: 2rem;
}
.text{
  text-align: justify;
  text-justify: inter-ideograph;
}
header .headerBg{
	background-size: 430px 367px;
}
header .headerInner{
 -webkit-display: flex;
 display: flex;
 justify-content: -webkit-space-between;
 justify-content: space-between;
 padding: 0;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 max-width: 1100px;
}
header .copy{
 flex-shrink: 0;
}
header .copy img{
	height: 90px;
}
header .copy p:nth-of-type(n+2){
	margin-top: 20px;
}
header .bigT{
 max-width: 100%;
	margin: 0;
}
header .bigT::before{
	width: 24%;
 height: 27%;
 top: 0%;
 right: 4%;
}
header .bigT::after{
	width: 25%;
	height: 27%;
	top: 71%;
 left: 6%;
}
main{
	margin: 130px 0 0;
}
h1 img{
	width: 538px;
} 
 .introWrap{
  max-width: 1100px;
  margin: 0 auto;
 }
.intro{
	margin: -40px 50px 0;
	padding: 85px 30px 45px;
	border: 2px solid #000;
	border-radius: 50px;
}
.intro p:nth-of-type(n+2){
	margin-top: 10px;
}
.circleBox{
 -webkit-display: flex;
 display: flex;
 justify-content: -webkit-center;
 justify-content: center;
 max-width: 1100px;
	margin: 100px auto 90px;
}
.t-shirt img{
 width: 100%;
}
.circleBox .t-shirt{
 width: 32%;
}
.circleBox .t-shirt:nth-of-type(2n+1)::before{
 width: 107%;
 height: 126%;
 top: -16%;
 left: -2%;
}
.circleBox .t-shirt:nth-of-type(2n+1)::after{
 width: 37%;
 height: 142%;
 top: -73px;
 right: -143%;
}
.circleBox .t-shirt:nth-of-type(2n){
 margin: 0 0 0 30px;
 text-align: left;
}
.circleBox .t-shirt:nth-of-type(2n)::before{
 width: 107%;
 height: 126%;
 top: -15%;
 left: -2%;
}
.circleBox .t-shirt:nth-of-type(2n)::after{
 width: 38%;
 height: 129%;
 top: -53px;
 left: -146%;
}
 .center{
  text-align: center;
 }
.title{
 display: inline-block;
 max-width: 1100px;
}
.btnWrap{
 text-align: center;
 margin: 60px 0 230px;
}
.btn{
	max-width: 346px;
}
section{
 position: relative;
}
section:nth-of-type(n+2){
 margin-top: 80px;
}
 section:nth-of-type(2n) .textBox{
  margin: 0 0 0 auto;
 }
 section:nth-of-type(2n) h2{
  margin: 0 0 0 auto;
 }
section::before{
 width: 35%;
 height: 160px;
}
section:nth-of-type(2n+1)::before{
 left: 0;
}
.featureWrap{
 max-width: 1100px;
 margin: 0 auto;
 padding: 0 20px;
}
.featureBox section:nth-child(1) h2{
 width: 473px;
}
.featureBox section:nth-child(2) h2{
 width: 492px;
}
.featureBox section:nth-child(4) h2{
 width: 370px;
}
.featureBox section:nth-child(5) h2{
 width: 395px;
}
.textBox{
 width: 60%;
}
section .text{
 margin: 25px 0 0;
}
section p:nth-of-type(n+2){
 margin-top: 10px;
}
.slideWrap{
 margin-top: 90px;
}
.slideWrap .slide .t-shirt{
 margin-right: -150px;
}
.outro{
 margin-top: 100px;
 text-align: center;
 font-size: 3rem;
 line-height: 2;
}
footer{
 padding: 40px 0;
 font-size: 1.4rem;
}
}