@charset "euc-jp";


/* Font Setup */
body {font-family: 'Noto Sans JP', sans-serif}

/* common */
p{ line-height: 1.4}
.wrap{ max-width: 1000px; margin: 0 auto}
main img{ margin: 0 auto}
.pc { display: none}
.sp { display: block}



/* Tshirts
---------------------------------------------------------------------- */
/* common*/
#yoyaku, #spec, #design, #contact{ padding: 2rem 0.5rem 5rem}
#yoyaku h2, #spec h2, #design h2, #contact h2, #info h2{
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	padding-bottom: 1rem;
	border-bottom: 1px solid;
	margin-bottom: 2rem
}


/* header */
header{ max-width: 1000px; margin: 0 auto}
.pank{ font-size:0.5rem; margin:0.5rem; color:#222}
.pank a{ color:#222}

/* top */
#top{ padding: 1rem 0.5rem; margin-bottom: 3rem}
#top h1{ font-size: 150%; font-weight: 700; text-align: center; margin-bottom: 2rem}
#top br{ display: none}
#top p{ margin-bottom: 0.5rem; text-align: justify}
#top .kikan{ margin: 2rem 0; color: #ff0000; text-align: center}
#top .kikan p{ font-weight: 700; text-align: center}
#top .attention{ color: #ff0000}
#top .attention p{ font-weight: 700}

#top .support a{ color: blue}
#top .support a:hover{ transition: 0.6s all}


/* yoyaku */
#yoyaku table{ margin-bottom: 2rem; border-collapse: separate; border-spacing: 0 0.3rem }
#yoyaku th, #yoyaku td{ display: block; padding: 1rem 0.5rem}
#yoyaku th{ background: #ddd}
#yoyaku td{ margin-bottom: 1rem; line-height: 1.6; text-align: justify; background-color: #f9f9f9}
#yoyaku table a{ color: blue; font-weight: bold}
#yoyaku ul {list-style-type: disc; padding-left: 1rem}
#yoyaku li{ padding-left: 0; margin-bottom: .8rem}
#yoyaku li:last-child{ margin-bottom: 0}
#yoyaku .payment{ margin: .8rem 0; padding-left: 1.5rem}
#yoyaku .payment li{ line-height: 1.2; margin-bottom: .4rem}

#yoyaku .tantou{ margin-top: 1rem; font-size: 90%}
.att{ color: #ff0000}
.att-s{ font-size: 85%; line-height: 2}
#yoyaku .cancel{ font-size: 90%}
a.btn{
	width: 70%;
	margin: 0 auto;
	display:block;
	font-size: 1.2rem;
	font-weight: 700;
	text-align: center;
	border: 2px solid #222;
	color: #222;
	padding: 1.4rem 1rem;
	transition: 0.6s all
}
a.btn:hover{
	color: #fff;
	background: #222;
	text-decoration: none	
}



/* spec */
#spec .spec{ width: 90%; margin: 0 auto 2rem}
#spec .spec th,#spec .spec td{ display: block; padding: 0.5rem; text-align: center}
#spec .spec th{ background: #ddd}
#spec .spec td{ margin-bottom: 1rem; line-height: 1.3; background: #eee}

#spec h3{ text-align: center; font-weight: 700; font-size: 1.2rem; margin-bottom: 1rem}
#spec .size{ font-size: 0.85rem; border-collapse: collapse; max-width: 700px; margin: 0 auto}
#spec .size th,#spec .size td{
	padding: 0.4rem 0.3rem;
	text-align: center;
	border: 1px solid
}
#spec .size th{ width: 24%}
#spec .size td{ width: 19%}




/* design */
#design { text-align: justify}
#design .tbox{ padding: 2rem 0 3rem; text-align: center;}
#design .tbox h3{
	border-top:  1px dotted #999;
	border-bottom: 1px dotted #999;
	padding: 1rem 2rem;
	display: inline-block;
	margin: 0 auto 2rem
	
}
#design .tbox div{ margin-bottom: 2rem}
#design a:hover img{
	opacity: 0.7;
	filter: alpah(opacity=70);
	-ms-filter:"alpha(opacity=70)";
	transition: 0.6s all
}
#design .order span{ font-size: 80%; line-height: 1.6}
#design li{ padding-left: 0;margin-top: 1rem; margin-bottom: .5rem}
#design li:last-child{ margin-bottom: 0}

#design h5{ text-align: center}
#design h5 a{ color: #222; border-top: 1px solid #222; border-bottom: 1px solid #222; padding: 0.5rem; text-decoration: none}
#design h5 a:hover{ color: #DC0003}



/* contact */
#contact p{ text-align: center; margin-bottom: 0.5rem}
#contact .at{ display: flex; flex-wrap: wrap; justify-content: center; padding: 0 0.5rem}
#contact .at p{ font-size: 0.8rem; text-align: left}
#contact .at2{ text-align: center; font-size: 1.1rem; margin-bottom: 1.5rem}
#contact .tantou{ margin: 1rem auto; font-size: 90%}



/* info */
#info{ padding: 2rem 0.5rem}
#info p{ text-align: center; font-weight: bold; font-size: 110%}
#info table{ margin: 0.5rem auto 0}
#info th, #info td{ padding: 0.5rem; line-height: 1.5; vertical-align: top}


/* footer */
#footer_box img{ display: block; margin: 0 auto 1rem}


@media screen and (min-width:768px)  {
	main{ max-width: 1000px; margin: 0 auto}
	a.btn{ width: 40%}
  .pc { display: block}
	.sp { display: none}
	
	#yoyaku, #spec, #design, #contact{ padding: 2rem 0.5rem 8rem}
	
	/* top */
	#top{ padding: 1rem 0; margin-bottom: 8rem}
	#top br{ display: inline}
	#top p{ text-align: center}
	#top .kikan{ margin: 4rem 0}
	#top .kikan p{ font-size: 1.3rem}
	#top .top_info{ width: 70%; margin: 0 auto; }
	#top .top_info p{ text-align: left}
	
	
	/* yoyaku */
	#yoyaku table{ margin-bottom: 5rem}
	#yoyaku th, #yoyaku td{ display: table-cell; padding: 0.8rem}
	#yoyaku th{ background: #ddd; width: 20%}
	#yoyaku .order{ display: flex}
	#yoyaku .order li{ width: 33%}
	
	
	
	/* spec */
	#spec .inner{ display: flex}
	#spec article{ width: 80%; margin: 0 auto}
	#spec .spec{ width: auto; margin: 0 auto 2rem}
	#spec .spec th,#spec .spec td{ display: table-cell; padding: 0.8rem 2.5rem}
	#spec .spec th{ background: #ddd}
	#spec .spec td{ text-align: left}

	
	
	/* design */
	#design p{ text-align: center}
	#design article .inner{ display: flex; flex-wrap: wrap}
	#design article .inner div{ width: 50%; padding: 1rem}
	#design .tbox h3{ font-size: 120%}
	#design .tbox p{ margin-top: 1rem}
	#design .order{ display: flex}
	#design .order li{ width: 33%}
	
	
	/* contact */
	#contact .at{ display: block}
	#contact .at p{ text-align: center}
}




@media screen and (min-width:1024px) {
	.inner2{ display: flex; padding: 4rem 0}
	.inner2 #contact, .inner2 #info{ width: 50%}
	.inner2 #contact{ padding: 0 0.5rem 0 0}
	.inner2 #info{ padding: 0 0 0 0.5rem}
}