@charset "utf-8";
/* CSS Document */
.pcNone{display: none;}
.spNone{display: block;}
body{margin: 0 auto; color: #000; font-family:'Noto Sans JP',"游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;font-weight: 500;}
p{font-size: 20px; margin: 0;}
h2{margin: 0;}
h3{margin: 0;}

/*コンテンツ部分*/
img{width: 100%; height: auto;}
#fvBox{background: url(/uniform2026-27/images/bg_img01.jpg);background-size: cover; background-repeat: no-repeat; padding: 0;}
#fvBox .main{display: flex; max-width: 1200px; width: 90%; align-items: center; margin: 0 auto; padding: 3em 0;}
#fvBox .main p{width: 50%;}

.lineBox{position: relative;}
.lineBox::before{content: ""; background: #00afad; position: absolute; top: 0; left: 0; width: 3%; height: 100%;}
.lineBox::after{content: ""; background: #00afad; position: absolute; top: 0; right: 0; width: 3%; height: 100%;}


/*concept*/
#concept{background: #ededed; padding: 0;}
#concept .concept{max-width: 1200px; width: 90%; margin: 0 auto; padding: 80px 0;}
#concept .concept h2{width: 420px; margin-bottom: 1em;}
#concept .concept h3{font-size: 250%; font-weight: 900; margin-bottom: 0.5em; color: #00afad;}
#concept .concept p{color: #000; font-weight: bold;}

/*desigin*/
#desigin{background: #fff; padding: 0;}
#desigin .desigin{max-width: 1200px; width: 90%; margin: 0 auto; padding: 80px 0;}
#desigin .desigin h2{width: 420px; margin-bottom: 1em;}
#desigin .desigin .uniformBox{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-around;}
#desigin .desigin .uniformBox .home{margin-bottom: 4em;}

/*comment*/
#comment{background: #ededed; padding: 0;}
#comment .comment{max-width: 1200px; width: 90%; margin: 0 auto; padding: 80px 0;}
#comment .comment h2{width: 420px; margin-bottom: 1em;}
#comment .comment .supplier h3{width: 190px; margin: 0 auto 2em;}
#comment .comment .innerBox{padding: 3em; background: #fff; max-width: 880px; width: 75%; margin: 0 auto;}
#comment .comment .innerBox .logo{width: 60%; margin: 0 auto;}
#comment .comment h4{text-align: center; font-size: 180%; font-weight: bold; margin: 1em 0;}
#comment .comment .txtbox{margin: 1em 0 1.5em; letter-spacing: -0.4px;}
#comment .comment .btn{width: 30%; margin: 0 auto;}
#comment .comment .partner h3{width: 190px; margin: 5em auto 2em;}
#comment .comment .partner .innerBox div{border-bottom: 1px solid #000; padding: 3.5em 0;}
#comment .comment .partner .innerBox div:last-child{border-bottom: none;}

/*buyBox*/
#buyBox{background: #fff; padding: 0;}
#buyBox .btnBox{padding: 80px 0; width: 90%; max-width: 1300px; margin: 0 auto; position: relative;}
#buyBox .btnBox .uniformbuy{display: flex; justify-content: space-between; filter: drop-shadow(7px 7px 5px rgba(0, 0, 0, .15));}
#buyBox .btnBox .uniformbuy a{background: #f4f2f2; clip-path: polygon(0 0, calc(100% - 100px) 0, 100% 100px, 100% 100%, 0 100%); padding: 3em; display: block;}
#buyBox .btnBox .uniformbuy .uniform{width: 50%; margin: 0 auto;}
#buyBox .btnBox .uniformbuy .ttlBox{margin: 1em auto;}
#buyBox .btnBox .uniformbuy .ttl{font-size: 33px; font-weight: bold; line-height: 1.3; border-bottom: 1px solid; padding: 0 0 10px; color: #000000;}
#buyBox .btnBox .uniformbuy .ttl span{display: block; font-size: 28px;}
#buyBox .btnBox .uniformbuy .price{font-size: 40px; font-weight: bold; padding: 10px 0 0; color: #000000;}
#buyBox .btnBox .uniformbuy .price span{font-size: 35px;}
#buyBox .btnBox .uniformbuy .innerbtnBox{width: 90%; margin: 0 auto;}
#buyBox .btnBox .uniformbuy .innerbtnBox .btn{background: #43adb9; font-size: 28px; color: #fff; font-weight: bold; display: block; padding: 10px 0; margin-bottom: 0.5em; text-align: center;} 
#buyBox .btnBox .uniformbuy .innerbtnBox .txt{color: #43adb9; font-weight: bold;}
#buyBox .btnBox .uniformbuy .authenticBox{width: 47%;}
#buyBox .btnBox .uniformbuy .replicaBox{width: 47%;}

/*footer*/
footer{background: url(/uniform2026-27/images/bg_img02.jpg); background-size: cover; background-repeat: no-repeat; padding: 2rem;}
footer .tac{width: 10%; margin: 0 auto 1em;}
footer .txt_copyright{font-weight: 200; text-align: center; margin-top: 1em;}

@media (max-width:820px) and (max-width: 1200px) {
	.pcNone{display: block;}
    .spNone{display: none;}
	p{font-size: 95%;}
	
	#fvBox .main{padding: 2em 0;}
	#fvBox .main .first{width: 50%;}
	
	#concept .concept{padding: 2em 0; width: 85%;}
	#concept .concept h2{width: 75%; margin-bottom: 0;}
	#concept .concept h3{font-size: 160%; margin: 0 0 0.5em;}
	
	#desigin .desigin{padding: 2em 0; width: 85%;}
	#desigin .desigin h2{width: 75%; margin-bottom: 0;}
	#desigin .desigin .uniformBox .home{margin-bottom: 2em;}
	
	#comment .comment{padding: 2em 0; width: 85%;}
	#comment .comment h2{width: 75%; margin-bottom: 0;}
	#comment .comment .supplier{margin-bottom: 2em;}
	#comment .comment .supplier h3{width: 45%; margin: 1em auto;}
	#comment .comment .innerBox{width: auto; padding: 30px 15px;}
	#comment .comment .innerBox .logo{width: 60%; margin: 0 auto;}
	#comment .comment h4{font-size: 115%; line-height: 1.3;}
	#comment .comment .txtbox{margin: 1em 0 1.5em; letter-spacing: -0.4px; font-size: 95%;}
	#comment .comment .btn{width: 70%;}
	#comment .comment .partner h3{width: 45%; margin: 0 auto 01em;}
	
	#buyBox .btnBox{padding: 2em 0; width: 90%;}
	#buyBox .btnBox .uniformbuy{display: block;}
	#buyBox .btnBox .uniformbuy{width: 100%;}
	#buyBox .btnBox .uniformbuy a{padding: 1.5em;}
	#buyBox .btnBox .uniformbuy .uniform{width: 40%;}
	#buyBox .btnBox .uniformbuy .ttl{font-size: 125%;}
	#buyBox .btnBox .uniformbuy .ttl span{font-size: 90%;}
	#buyBox .btnBox .uniformbuy .price{font-size: 150%;}
	#buyBox .btnBox .uniformbuy .price span{font-size: 90%;}
	#buyBox .btnBox .uniformbuy .innerbtnBox{width: 100%;}
	#buyBox .btnBox .uniformbuy .innerbtnBox .btn{font-size: 125%; padding: 7px 0;}
	#buyBox .btnBox .uniformbuy .authenticBox{width: 100%; margin-bottom: 2em;}
	#buyBox .btnBox .uniformbuy .replicaBox{width: 100%;}
}