@charset "UTF-8";

/*
	Theme Name: OTONAKNOW
	Description: LAYOUT & SCRIPT DATA
	Author: Mochida Tomokazu
	Author URI: https://www.resite.jp/
	Version: 2025.01

*/

/*
font-family: 'Teko';
font-family: "Dancing Script", serif;
*/

*{margin: 0;padding: 0;}
html {font-family: 'Zen Kaku Gothic New', sans-serif;}
a{outline:none !important;}
a:focus{outline:none !important;}
li{outline:none !important;}
li:focus{outline:none !important;}
figure{margin:0;}

.pagination {text-align: center;margin-top: 40px;clear: none;margin-bottom: 0px;}
.pagination span {text-decoration: none;color: #000;background-color: #eee;font-size: 13px;font-weight: bold;padding: 2px 8px;}
.pagination a {text-decoration: none;color: #333;font-size: 13px;padding: 2px 5px;border-radius: 4px;}





@media all and (min-width:751px) {
body {color: #000;font-size: 16px;line-height: 1.7;font-weight: normal;}
ul,li {list-style-type: none;}
a:hover{opacity: 0.4;transition: 0.4s ease-in-out;}


/*--------ヘッダー--------*/
header{display: block;position: fixed;z-index: 2;width: 100%;box-sizing: border-box;background-color: rgba(0,0,0,0.8);height: 180px;}
header section{width: 1200px;margin: auto;height: 130px;display: flex;justify-content: center;align-items: center;position: relative;}
header h1{display: block;}
header h1 a{display: block;font-size: 16px;text-decoration: none;color: #fff;text-align: center;}
header h1 a img{display: block;width: 300px;height: auto;margin-bottom: 4px;}
header .pcnav{position: relative;}
header .pcnav ul{display: flex;width: 1200px;margin: auto;height: 100%;justify-content: space-between;align-items: flex-start;position:relative;}
header .pcnav ul li{height: 100%;display: flex;align-items: center;width: 100%;justify-content: center;position: relative;}
header .pcnav ul li a{color: #fff;font-size: 26px;text-decoration: none;letter-spacing: 2px;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;font-family: 'Teko';font-weight: bold;}



/*--------フッダー--------*/
footer{justify-content: center;flex-direction: column;align-items: center;padding: 40px 0px 0px;box-sizing: border-box;background-image: url(images/footer_bg.jpg);background-position: bottom center;background-size: cover;}
footer h1{margin-top: 25px;font-size: 16px;text-align: center;}
footer h1 img{display: block;width: 280px;height: auto;margin: auto;margin-bottom: 4px;}
footer address{font-style: normal;display: block;margin-top: 25px;text-align: center;}
footer small{font-size: 12px;display: block;margin-top: 250px;background-color: #000;color: #fff;text-align: center;padding: 4px 0;}





/*--------コンテンツ共通--------*/
main{padding-top: 0px;display: block;}
article{display: block;}

br.spbr{display: none;}

.midashi{width: 100%;height: 500px;background-image: url(images/midashi_bg.jpg);background-size: cover;background-position: center top;display: flex;align-items: flex-end;justify-content: center;}
.midashi h2{font-size: 50px;font-weight:lighter;color: #fff;text-align: center;line-height: 1;font-family: "Montserrat", serif;letter-spacing: -1px;margin-bottom: -10px;}
p.read{font-size: 30px;font-weight: bold;text-align: center;letter-spacing: 2px;}



.anc{margin-top:-350px;padding-top:350px;pointer-events:none;}



.scr{border-top: 1px solid #000;position: relative;margin-top: 180px;margin-bottom: -60px;}
.scr>div{font-size: 22px;font-family: 'Teko';letter-spacing: 2px;display: table;position: relative;left: 50%;transform: translate(-50%, 0);background-color: #fff;padding: 50px 35px;z-index: 1;top: -60px;line-height: 1;font-weight: bold;}
/*.scr>div::before{content: url(images/temp_title.png);position: absolute;left: 50%;transform: translate(-50%, 0);bottom: 80px;}*/
.scr>div::after{content: url(images/temp_title_arrow.png);position: absolute;left: 50%;transform: translate(-50%, 0);bottom: 25px;}



.temp1{width: 100%;background-image: url(images/temp1_bg.jpg);margin-top: 80px;position: relative;}
.temp1::before{content: "";position: absolute;height: 60px;width: 100%;left: 0;bottom: 0;background-color: #fff;}
.temp1 ul{width: 1200px;margin: auto;position: relative;top: -30px;}
.temp1 ul li{display: flex;align-items: center;color: #fff;}
.temp1 ul li figure{width: 50%;display: block;}
.temp1 ul li:nth-of-type(2) figure{order: 1;}
.temp1 ul li figure img{display: block;width: 100%;height: auto;}
.temp1 ul li div{width: 50%;padding: 50px 0px 50px 50px;box-sizing: border-box;}
.temp1 ul li:nth-of-type(2) div{padding: 50px 50px 50px 0px;}
.temp1 ul li h2{position:relative;display: flex;align-items: center;margin-top: 50px;z-index: 1;}
.temp1 ul li:nth-of-type(1) h2::before{content: "Embroidery";}
.temp1 ul li:nth-of-type(2) h2::before{content: "Playing golf";}
.temp1 ul li:nth-of-type(3) h2::before{content: "Ordernade";}
.temp1 ul li h2::before{position: absolute;left: -5px;top: -60px;color: #FFBF00;font-size: 44px;font-weight: 500;transform: rotate(-6deg);letter-spacing: -1px;font-family: "Allura", serif;}
.temp1 ul li h2 small{display: flex;align-items: center;justify-content: center;font-size: 30px;font-style: italic;width: 40px;height: 40px;background-color: #ff0000;line-height: 0;margin-top: -6px;}
.temp1 ul li h2 span{font-size: 50px;font-weight: normal;font-family: 'Teko';letter-spacing: 2px;position: relative;z-index: 20;display: block;padding-left: 20px;padding-right: 20px;}
.temp1 ul li h2::after{}
.temp1 ul li h2 a{text-decoration: none;color: #fff;font-family: 'Teko';font-weight: normal;margin: 0 0 0 auto;font-size: 22px;letter-spacing: 2px;padding-left: 10px;position: relative;padding-right: 15px;}
.temp1 ul li h2 a::after{content:url(images/temp1_arrow.png);position: absolute;right: 0;top: 0;}
.temp1 ul li:nth-of-type(1) h2 a::before{width: 85%;}
.temp1 ul li:nth-of-type(2) h2 a::before{width: 330%;}
.temp1 ul li:nth-of-type(3) h2 a::before{width: 200%;}
.temp1 ul li h2 a::before{content: "";border-top:1px solid #fff;position: absolute;z-index: -1;top: 16px;right: 70px;}
.temp1 ul li div p{font-size: 18px;margin-top: 15px;}
.temp1 ul li div p b{font-size: 24px;color: #ff0000;display: block;}



.temp2{margin-top: 100px;}
.temp2>span{display: table;font-family: 'Teko';font-size: 20px;font-weight: bold;border: 1px solid #ccc;padding: 4px 30px 0px 30px;position: relative;left: 50%;transform: translate(-50%, 0);line-height: 1.5;}
.temp2>span::before{content: url(images/newitem_title.png);position: absolute;left: -50px;bottom: -25px;}
.temp2 h2{border-top: 1px solid #000;position: relative;margin-top: 50px;}
.temp2 h2 b{font-size: 50px;font-family: 'Teko';letter-spacing: 2px;display: table;position: relative;left: 50%;transform: translate(-50%, 0);background-color: #fff;padding: 0 25px;z-index: 1;top: -20px;line-height: 1;}
.index .temp2 ul{display: flex;width: 1200px;margin: auto;flex-wrap: wrap;margin-top: -20px;}
.index .temp2 ul li{width: 280px;display: block;margin-right: 26px;margin-top: 60px;}
.index .temp2 ul li:nth-of-type(4n){margin-right: 0;}
.temp2 ul li a{color: #000;text-decoration: none;}
.temp2 ul li a img{display: block;width: 100%;height: auto;}
.temp2 ul li a b{display: block;margin-top: 15px;font-weight: normal;font-size: 15px;}
.temp2 ul li a span:nth-of-type(1){display: block;}
.temp2 ul li a span:nth-of-type(1) small{font-size: 15px;}
.temp2 ul li a span:nth-of-type(2){display: block;font-size: 15px;line-height: 1.4;margin-top: 10px;text-align: left;}


.contents .temp2{margin-bottom: 100px;}
.contents .temp2 ul{width: 100%;margin-top: 40px;}
.contents .temp2 ul li{display: block;margin: 0 10px;}





.temp3{background-image: url(images/topics_bg.jpg);position: relative;margin-top: 100px;background-size: cover;background-position: right top;}
.temp3 .topics{width: 1200px;margin: auto;padding: 60px 0 60px;position: relative;}
.temp3 .topics::before{content: "";border-top:6px solid #ff0000;width: 300px;position: absolute;left: 0;top: 0;}
.temp3 .topics h3{font-size: 50px;letter-spacing: 2px;font-family: 'Teko';color: #fff;font-weight: normal;display: flex;align-items: center;}
.temp3 .topics h3 span{font-size: 20px;margin-left: 20px;letter-spacing: 0px;}
.temp3 .topics>div{background-color: rgba(255,255,255,0.15);padding: 30px;box-sizing: border-box;}
.temp3 .topics>div>ul{display: block;}
.temp3 .topics>div>ul li{border-bottom: 1px dotted #999;padding-bottom: 20px;margin-bottom: 20px;}
.temp3 .topics>div>ul li:last-child{border-bottom: none;}
.temp3 .topics>div>ul li a{font-size: 16px;text-decoration: none;color: #fff;font-weight: normal;display: flex;align-items: center;}
.temp3 .topics>div>ul li a figure{display: block;margin-right: 20px;flex: 0 0 90px;}
.temp3 .topics>div>ul li a figure img{display: block;width: 100%;height: auto;}
.temp3 .topics>div>ul li a span time{font-size: 14px;display: block;}
.temp3 .topics>div>ul li a span{display: block;text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.9);flex: 1;}
.temp3 .topics>div>ul li a span p{display: block;}
.temp3 .topics>div>a{text-decoration: none;color: #fff;font-weight: normal;text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.9);}
.temp3 .topics>div>a::before{content: "\25B8";margin-right: 4px;}

.temp3 .topics .links{display: flex;align-items: center;justify-content: center;margin-top: 30px;}
.temp3 .topics .links li{display: flex;}
.temp3 .topics .links li a{display: block;margin: 0 5px;}
.temp3 .topics .links li a img{display: block;}



/*--------トッページ--------*/
.top .s1{position: relative;}
.top .s1::before{content: "";position: absolute;width: 70px;height: 70px;transform: translate(-50%,-160px) rotate(-45deg);left: 50%;background-color: #fff;}
.top .s1 .box{margin: auto;width: 1200px;margin-top: 140px;display: flex;}
.top .s1 .box figure{order: 2;width: 100%;flex: 0 0 380px;margin-left: 60px;}
.top .s1 .box figure img{display: block;margin-top: -170px;}
.top .s1 .box div{flex: 1;}
.top .s1 h2{font-size: 32px;position: relative;margin-bottom: 30px;padding-bottom: 30px;border-bottom: 1px solid #ddd;}
.top .s1 h2::before{content: "More fun and more freedom";position: absolute;left: -40px;top: -82px;color: #FFBF00;font-size: 44px;font-weight: 500;transform: rotate(-6deg);letter-spacing: -1px;font-family: "Allura", serif;}
.top .s1 h2 b{color: #ff0000;}
.top .s1 p{font-size: 22px;font-weight: bold;}
.top .s1 p b{color: #ff0000;}





/*--------about--------*/
.about .s1{width: 1200px;margin: auto;margin-top: 70px;}
.about .s1>div{display: flex;margin-top: 100px;}
.about .s1 figure{position: relative;order: 2;flex: 0 0 530px;margin-left: 50px;}
.about .s1 figure::before{content: "Original item";position: absolute;right: -30px;bottom: -40px;color: #FFBF00;font-size: 70px;font-weight: 500;transform: rotate(-6deg);letter-spacing: -1px;font-family: "Allura", serif;}
.about .s1 figure img{display: block;width: 100%;height: auto;}
.about .s1>div p{font-size: 17px;flex: 1;line-height: 2;}
.about .s1>div p b{display: block;position: relative;background-image: url(images/about_s1_title_bg.jpg);color: #fff;font-size: 26px;text-align: center;margin-bottom: 40px;padding: 5px 0;}
.about .s1>div p b span{color: #ff0000;}
.about .s1>div p b::before{content: "BRAND HISTORY";font-family: "Cormorant", serif;font-size: 70px;font-weight: lighter;position: absolute;bottom: 13px;color: #ccc;white-space: nowrap;left: 50%;transform: translate(-50%, 0);z-index: -1;}
.about .s1>div p>span{text-align: right;display: block;}




/*--------concept--------*/
.concept .s1{margin: auto;margin-top: 70px;}
.concept .s1 ul {margin-top: 150px;}
.concept .s1 ul li{display: flex;position: relative;}
.concept .s1 ul li figure{width: 60%;background-position: center;background-size: cover;height: 400px;position: absolute;right: 0;top: -80px;clip-path: polygon(0% 100%, 10% 0%, 100% 0%, 100% 100%);}
.concept .s1 ul li:nth-of-type(n+2){margin-top: 60px;}
.concept .s1 ul li:nth-of-type(2) figure{left: 0;right: inherit;clip-path: polygon(0% 100%, 0% 0%, 90% 0%, 100% 100%);}
.concept .s1 ul li:nth-of-type(2)>div{margin: 0 0 0 auto;}
.concept .s1 ul li:nth-of-type(1) figure{background-image: url(images/concept_img1.jpg);}
.concept .s1 ul li:nth-of-type(2) figure{background-image: url(images/concept_img2.jpg);}
.concept .s1 ul li:nth-of-type(3) figure{background-image: url(images/concept_img3.jpg);}
.concept .s1 ul li>div{width: 60%;height: 400px;background-color: #004860;position:relative;display: flex;align-items: center;/* clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 90% 100%); */}
.concept .s1 ul li>div::before{content: "";position: absolute;height: 120%;width: 200px;background-color: #fff;right: -50px;bottom: -10%;transform: rotate(15deg);}
.concept .s1 ul li:nth-of-type(2)>div{/* clip-path: polygon(10% 100%, 0% 0%, 100% 0%, 100% 100%); */}
.concept .s1 ul li:nth-of-type(2)>div::before{content: "";position: absolute;height: 120%;width: 200px;background-color: #fff;right: auto;left: -50px;bottom: -10%;transform: rotate(-15deg);}


.concept .s1 ul li:nth-of-type(2) .box{margin: 0 10% 0 auto !important;}
.concept .s1 ul li .box{width: 50%;margin-left: 10%;color: #fff;}
.concept .s1 ul li small{position: absolute;top: -65px;left: 10%;color: #00465F;font-size: 42px;font-family: 'Teko';font-style: italic;font-weight: normal;letter-spacing: 2px;z-index: -1;}
.concept .s1 ul li small b{font-size: 60px;}
.concept .s1 ul li:nth-of-type(2) small{left: auto;right: 10%;}
.concept .s1 ul li h2{font-size: 26px;position: relative;display: table;}
.concept .s1 ul li h2::after{content: "";border-top: 1px solid #fff;width: 300px;position: absolute;z-index: 1;top: 40px;right: -320px;}
.concept .s1 ul li:nth-of-type(2) h2{}
.concept .s1 ul li:nth-of-type(2) h2::after{right: 0;left: -320px;}
.concept .s1 ul li h2 span{font-size: 40px;}
.concept .s1 ul li p{margin-top: 30px;}






/*--------itemlist--------*/
.item .s1{width: 1200px;margin: auto;margin-top: 70px;}
.item .s1 ul{display: flex;width: 1200px;margin: auto;flex-wrap: wrap;}
.item .s1 ul li{width: 280px;display: block;margin-right: 26px;margin-top: 60px;}
.item .s1 ul li:nth-of-type(4n){margin-right: 0;}
.item .s1 ul li a{color: #000;text-decoration: none;}
.item .s1 ul li a img{display: block;width: 100%;height: auto;}
.item .s1 ul li a b{display: block;margin-top: 15px;font-weight: normal;font-size: 15px;}
.item .s1 ul li a span:nth-of-type(1){display: block;}
.item .s1 ul li a span:nth-of-type(1) small{font-size: 15px;}
.item .s1 ul li a span:nth-of-type(2){display: block;font-size: 15px;line-height: 1.4;margin-top: 10px;text-align: left;}



/*--------itemlist_detail--------*/
.detail .s1{width: 1200px;margin: auto;margin-top: 70px;}
.detail .s1>div{display: flex;margin-top: 70px;align-items: center;}
.detail .s1 figure{flex: 0 0 300px;margin-right: 60px;}
.detail .s1 figure img{display: block;width: 100%;height: auto;}
.detail .s1>div div{flex: 1;}
.detail .s1 table{border: 1px solid #ddd;border-collapse: collapse;width: 100%;}
.detail .s1 table th{text-align: left;padding: 10px 16px;box-sizing: border-box;border-bottom: 1px solid #eee;}
.detail .s1 table td{padding: 10px 16px;box-sizing: border-box;border-bottom: 1px solid #eee;}
.detail .s1 table td .cost{display: block;margin-top:5px;font-size: 20px;}
.detail .s1 table td .cost small{font-size: 15px;}
.detail .s1 table td a{display: table;background-color: #ff0000;color: #fff;text-decoration: none;padding: 5px 20px;border-collapse: separate;border-radius: 4px;margin-top: 15px;font-weight: bold;}
.detail .s1 table td a::before{content:"\25B8";}




/*--------original--------*/
.original .s1{width: 1200px;margin: auto;margin-top: 70px;}
.original .s1>div{margin-top: 50px;}
.original .s1>div p{text-align: center;font-size: 17px;line-height: 2;}


.original .s2{background-image: url(images/order_bg1.jpg);background-position: center;background-size: cover;z-index: 1;position: relative;margin-top: 100px;overflow: hidden;}

.original .s2::before{content: "";position: absolute;height: 200px;width: 200%;background-color: #fff;left: -55%;top: -100px;transform: rotate(-5deg);z-index: -1;}
.original .s2::after{content: "";position: absolute;height: 200px;width: 200%;background-color: #fff;left: -55%;bottom: -100px;transform: rotate(-5deg);z-index: -1;}

.original .s2 .head{display: flex;width: 1200px;margin: auto;align-items:flex-end;}
.original .s2 .head figure{display: block;margin-right: 30px;}
.original .s2 .head figure img{display: block;width: 100%;height: auto;}
.original .s2 .head h2{color: #FFFF4C;font-size: 34px;position: relative;}
.original .s2 .head h2 span{display: table;font-size: 22px;color: #fff;font-weight: normal;border:1px solid #fff;padding: 6px 20px;margin-bottom: 10px;}
.original .s2 .head h2::before{content: "Ordernade";position: absolute;left: -23px;top: -80px;color: #FFBF00;font-size: 70px;font-weight: 500;transform: rotate(-6deg);letter-spacing: -1px;font-family: "Allura", serif;}
.original .s2 p{font-size: 18px;color: #fff;width: 1200px;margin: auto;margin-top: 40px;line-height: 2;}
.original .s2 p a{display: table;padding: 10px 100px;position: relative;left: 50%;transform: translate(-50%,0);background-color:#FFFF4C;font-size: 22px;font-weight: bold;color: #000;text-decoration: none;border-radius: 4px;margin-top: 40px;}
.original .s2 p a::after{content: "\25B8";margin-left: 5px;}

.original .s2 .banner{margin-top: 100px;}
.original .s2 .banner h3{text-align: center;font-size: 22px;color: #fff;}
.original .s2 .banner h3 img{margin: auto;display: block;height: auto;margin-bottom: 10px;}
.original .s2 .banner ul{display: flex;align-items: flex-start;justify-content: center;margin-top: 30px;}
.original .s2 .banner ul li{display: block;display: flex;flex-direction: column;margin: 0 20px;}
.original .s2 .banner ul li img{}
.original .s2 .banner ul li span{border: 1px solid #000;display: block;border-top: none;background-color:#004860;text-align: center;padding: 10px;}
.original .s2 .banner ul li a{color: #fff;text-decoration: none;font-size: 17px;}
.original .s2 .banner ul li a::before{content: "／";}
.original .s2 .banner ul li a:nth-of-type(1)::before{content: none;}


/*--------example--------*/	
.example .s1{width: 100%;margin: auto;margin-top: 70px;}
.example .s1 strong{display:block;text-align:center;font-size: 17px;margin-top: 30px;font-weight: normal;}
.example .s1 ul{margin-top: 40px;}
.example .s1 ul li{display: flex;position: relative;}
.example .s1 ul li figure{width: 70%;position: relative;}
.example .s1 ul li:nth-of-type(even) figure{margin: 0 0 0 auto;}	
.example .s1 ul li figure img{width: 100%;height: auto;display: block;}
.example .s1 ul li div{width: 55%;position: absolute;right: 2%;background-color: rgba(0,0,0,0.8);bottom: 50px;padding: 30px 50px;box-sizing: border-box;color: #fff;height: auto;}
.example .s1 ul li div::before{content:"";position: absolute;width:100%;height: 40px;background-color: rgba(255,0,0,1);right: 10px;top: -30px;display: block;z-index: -1;}
.example .s1 ul li:nth-of-type(even) div::before{left: 10px;}		
.example .s1 ul li:nth-of-type(even) div{left: 2%;right: auto;}	
.example .s1 ul li h3{font-size: 40px;font-family: "Montserrat", serif;}
.example .s1 ul li b{font-size: 22px;display: block;line-height: 1.5;}	
.example .s1 ul li p{margin-top: 15px;}


/*--------post--------*/
.post .s1{display: flex;flex-direction: column;width: 1200px;margin: auto;margin-top: 70px;}
.post .selecter{display:flex;justify-content:center;align-items:center;margin-top: -20px;margin-bottom: -40px;}
.post .selecter select{font-size:16px;margin-right:10px;padding:5px 10px;}
.post .s1 .container{margin-top:100px;}
.post .s1 .container:last-child {margin-bottom:70px;}
	


/*--------postinitial--------*/
.post .container>h3{background-color: #f9f9f9;font-size: 18px;margin-bottom: 25px;color: #000;padding: 15px 30px;display: flex;border: 1px solid #ddd;border-radius: 5px;}
.post .container>h3::before{content: url(images/ec.png);margin-right: 10px;margin-top: 10px;line-height: 0;}
.post .container>time{display: block;align-items: center;justify-content: flex-end;margin-top: -20px;margin-bottom: -5px;font-size: 12px;text-align: right;}

	
.post .s1 .container>.inner h1{font-size: 20px;font-weight: bold;color: #000;}
.post .s1 .container>.inner h2{font-size: 18px;font-weight: bold;color: #000;}
.post .s1 .container>.inner h3,.post .s1 .container>.inner h4,.post .s1 .container>.inner h5,.post .s1 .container>.inner h6,.post .s1 .container>.inner b,.post .s1 .container>.inner em,.post .s1 .container>.inner p,.post .s1 .container>.inner span{font-size: 16px;font-weight: normal;color: #000;font-style: normal;margin:20px 0;}
.post .s1 .container>.inner ul{margin: 1em 0;}
.post .s1 .container>.inner ul li{margin-left: 25px;list-style-type: disc;}
.post .s1 .container>.inner ol{	margin: 1em 0;}
.post .s1 .container>.inner ol li{margin-left: 25px;list-style-type: decimal;}
.post .s1 .container>.inner a{color:#FF6600;}
.post .s1 .container>.inner a:hover{opacity: 0.4;transition: 0.4s ease-in-out;}
.post .s1 .container>.inner blockquote{display: inline;margin: 0;padding: 0;}
.post .s1 .container>.inner pre{display: inline;margin: 0;padding: 0;}
.post .s1 .container>.inner .alignright{float: right;margin-left: 40px;margin-bottom: 0px;max-width:640px;height:auto;}
.post .s1 .container>.inner .aligncenter{display: block;margin: auto;margin-bottom: 0px;max-width:640px;height:auto;}
.post .s1 .container>.inner .alignleft{float: left;margin-right: 40px;margin-bottom: 0px;max-width:640px;height:auto;}
.post .s1 .container>.inner .alignnone{margin-bottom: 0px;max-width:640px;height:auto;}

}










































/*--------スマートフォンー-------------------------------------------------------------------------------------------------------------------------------------------------------------------*/













@media all and (max-width:750px) {
body {color: #000;font-size: 16px;line-height: 1.7;font-weight: normal;}
ul,li {list-style-type: none;}


/*--------ヘッダー--------*/
header{display: block;position: fixed;z-index: 2;width: 100%;box-sizing: border-box;background-color: rgba(0,0,0,0.8);height: 70px;}
header section{width: 100%;margin: auto;height: 100%;display: flex;align-items: center;position: relative;}
header h1{display: block;margin-left: 20px;}
header h1 a{display: block;font-size: 15px;text-decoration: none;color: #fff;}
header h1 a img{display: block;width: 160px;height: auto;margin-bottom: 0px;}
header .pcnav{display: none;}



/*--------フッダー--------*/
footer{justify-content: center;flex-direction: column;align-items: center;padding: 30px 0px 0px;box-sizing: border-box;background-image: url(images/footer_bg.jpg);background-position: bottom center;background-size: cover;margin-bottom: 55px;}
footer h1{margin-top: 25px;font-size: 15px;text-align: center;}
footer h1 img{display: block;width: 200px;height: auto;margin: auto;margin-bottom: 4px;}
footer address{font-style: normal;display: block;margin-top: 20px;text-align: center;font-size: 15px;}
footer small{font-size: 12px;display: block;margin-top: 170px;background-color: #000;color: #fff;text-align: center;padding: 4px 0;}





/*--------コンテンツ共通--------*/
main{padding-top: 0px;display: block;}
article{display: block;}

br.spbr{display: none;}

.midashi{width: 100%;height: 180px;background-image: url(images/midashi_bg.jpg);background-size: cover;background-position: top center;display: flex;align-items: flex-end;justify-content: center;}
.midashi h2{font-size: 32px;font-weight:lighter;color: #fff;text-align: center;line-height: 1;font-family: "Montserrat", serif;letter-spacing: -1px;margin-bottom: -5px;}
p.read{font-size: 22px;font-weight: bold;text-align: center;letter-spacing: 2px;width: 90%;margin: auto;}

	
.anc{margin-top:-180px;padding-top:180px;pointer-events:none;}	
	

.scr{border-top: 1px solid #000;position: relative;margin-top: 220px;margin-bottom: -60px;}
.scr>div{font-size: 22px;font-family: 'Teko';letter-spacing: 2px;display: table;position: relative;left: 50%;transform: translate(-50%, 0);background-color: #fff;padding: 50px 20px;z-index: 1;top: -30px;line-height: 1;font-weight: bold;}
.scr>div::before{content: url(images/temp_title_sp.png);position: absolute;left: 50%;transform: translate(-50%, 0);bottom: 80px;}
.scr>div::after{content: url(images/temp_title_arrow.png);position: absolute;left: 50%;transform: translate(-50%, 0);bottom: 25px;}





.temp1{width: 100%;background-image: url(images/temp1_bg.jpg);margin-top: 80px;position: relative;padding-bottom: 30px;}

.temp1 ul{width: 100%;margin: auto;position: relative;top: -30px;}
.temp1 ul li{display: flex;align-items: center;color: #fff;flex-direction: column;margin: auto;width: 90%;}
.temp1 ul li:nth-of-type(2) {margin: 60px auto;}
.temp1 ul li figure{width: 100%;display: block;}
.temp1 ul li:nth-of-type(2) figure{}
.temp1 ul li figure img{display: block;width: 100%;height: auto;}
.temp1 ul li div{width: 100%;box-sizing: border-box;margin-top: -30px;}
.temp1 ul li:nth-of-type(2) div{}
.temp1 ul li h2{position:relative;display: flex;align-items: center;margin-top: 50px;z-index: 1;}
.temp1 ul li:nth-of-type(1) h2::before{content: "Embroidery";}
.temp1 ul li:nth-of-type(2) h2::before{content: "Playing golf";}
.temp1 ul li:nth-of-type(3) h2::before{content: "Ordernade";}
.temp1 ul li h2::before{position: absolute;left: -7px;top: -55px;color: #FFBF00;font-size: 40px;font-weight: 500;transform: rotate(-6deg);letter-spacing: -1px;font-family: "Allura", serif;}
.temp1 ul li h2 small{display: flex;align-items: center;justify-content: center;font-size: 20px;font-style: italic;width: 24px;height: 24px;background-color: #ff0000;line-height: 0;margin-top: -6px;}
.temp1 ul li h2 span{font-size: 32px;font-weight: normal;font-family: 'Teko';letter-spacing: 2px;position: relative;z-index: 20;display: block;padding-left: 10px;}
.temp1 ul li h2::after{}
.temp1 ul li h2 a{text-decoration: none;color: #fff;font-family: 'Teko';font-weight: normal;margin: 0 0 0 auto;font-size: 22px;letter-spacing: 2px;padding-left: 10px;position: relative;padding-right: 15px;}
.temp1 ul li h2 a::after{content:url(images/temp1_arrow.png);position: absolute;right: 0;top: 0;}
.temp1 ul li:nth-of-type(1) h2 a::before{width: 40%;}
.temp1 ul li:nth-of-type(2) h2 a::before{width: 40%;}
.temp1 ul li:nth-of-type(3) h2 a::before{width: 40%;}
.temp1 ul li h2 a::before{content: "";border-top:1px solid #fff;position: absolute;z-index: -1;top: 16px;right: 65px;}
.temp1 ul li div p{font-size: 16px;margin-top: 5px;}
.temp1 ul li div p b{font-size: 23px;color: #ff0000;display: block;}



.temp2{margin-top: 100px;}
.temp2>span{display: table;font-family: 'Teko';font-size: 20px;font-weight: bold;border: 1px solid #ccc;padding: 4px 30px 0px 30px;position: relative;left: 50%;transform: translate(-50%, 0);line-height: 1.5;}
.temp2>span::before{content: url(images/newitem_title.png);position: absolute;left: -50px;bottom: -25px;}
.temp2 h2{border-top: 1px solid #000;position: relative;margin-top: 50px;}
.temp2 h2 b{font-size: 40px;font-family: 'Teko';letter-spacing: 2px;display: table;position: relative;left: 50%;transform: translate(-50%, 0);background-color: #fff;padding: 0 25px;z-index: 1;top: -20px;line-height: 1;}
.index .temp2 ul{display: flex;width: 95%;margin: auto;flex-wrap: wrap;margin-top: -20px;justify-content: space-between;}
.index .temp2 ul li{width: 48%;display: block;margin-top: 40px;}
.temp2 ul li a{color: #000;text-decoration: none;}
.temp2 ul li a img{display: block;width: 100%;height: auto;}
.temp2 ul li a b{display: block;margin-top: 15px;font-weight: normal;font-size: 15px;}
.temp2 ul li a span:nth-of-type(1){display: block;}
.temp2 ul li a span:nth-of-type(1) small{font-size: 15px;}
.temp2 ul li a span:nth-of-type(2){display: block;font-size: 14px;line-height: 1.4;margin-top: 10px;text-align: left;}



.contents .temp2{margin-bottom: 100px;}
.contents .temp2 ul{width: 100%;margin-top: 40px;}
.contents .temp2 ul li{display: block;margin: 0 10px;}
.contents .temp2 ul li a{}
.contents .temp2 ul li a img{}





.temp3{background-image: url(images/topics_bg.jpg);position: relative;margin-top: 60px;background-size: cover;background-position: right top;}
.temp3 .topics{width: 90%;margin: auto;padding: 30px 0 30px;position: relative;}
.temp3 .topics::before{content: "";border-top: 6px solid #ff0000;width: 235px;position: absolute;left: 0;top: 0;}
.temp3 .topics h3{font-size: 34px;letter-spacing: 2px;font-family: 'Teko';color: #fff;font-weight: normal;display: flex;align-items: center;}
.temp3 .topics h3 span{font-size: 20px;margin-left: 20px;letter-spacing: 0px;}
.temp3 .topics>div{background-color: rgba(255,255,255,0.15);padding: 20px;box-sizing: border-box;}
.temp3 .topics>div>ul{display: block;}
.temp3 .topics>div>ul li{border-bottom: 1px dotted #999;padding-bottom: 20px;margin-bottom: 20px;}
.temp3 .topics>div>ul li:last-child{border-bottom: none;padding-bottom: 0;margin-bottom: 0;}
.temp3 .topics>div>ul li a{font-size: 15px;text-decoration: none;color: #fff;font-weight: normal;display: flex;align-items: center;}
.temp3 .topics>div>ul li a figure{display: block;margin-right: 20px;flex: 0 0 80px;}
.temp3 .topics>div>ul li a figure img{display: block;width: 100%;height: auto;}
.temp3 .topics>div>ul li a span time{font-size: 14px;display: block;}
.temp3 .topics>div>ul li a span{display: block;flex: 1;text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.9);}
.temp3 .topics>div>ul li a span p{display: block;line-height: 1.4;}
.temp3 .topics>div>a{text-decoration: none;color: #fff;font-weight: normal;font-size: 15px;margin-top: 30px;display: table;text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.9);}
.temp3 .topics>div>a::before{content: "\25B8";margin-right: 4px;}

.temp3 .topics .links{display: flex;align-items: center;justify-content: center;margin-top: 20px;}
.temp3 .topics .links li{display: flex;}
.temp3 .topics .links li a{display: block;margin: 0 5px;}
.temp3 .topics .links li a img{display: block;width: 40px;height: auto;}


/*--------トッページ--------*/
.top .s1{position: relative;}
.top .s1 .box{margin: auto;width: 90%;margin-top: 35px;}
.top .s1 .box figure{width: 100%;}
.top .s1 .box figure img{display: block;margin: 0 0 0 auto;margin-top: -160px;width: 35%;z-index: 1;position: relative;}
.top .s1 .box div{flex: 1;}
.top .s1 h2{font-size: 22px;position: relative;margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px solid #ddd;line-height: 1.5;}
.top .s1 h2::before{content: "More fun and more freedom";position: absolute;left: 0px;top: -100%;color: #FFBF00;font-size: 36px;font-weight: 500;transform: rotate(-6deg);letter-spacing: -1px;font-family: "Allura", serif;z-index: 1;text-shadow: 0px 0px 3px rgba(255, 255, 255, 1);}
.top .s1 h2 b{color: #ff0000;}
.top .s1 p{font-size: 17px;font-weight: bold;}
.top .s1 p b{color: #ff0000;}




/*--------about--------*/
.about .s1{width: 90%;margin: auto;margin-top: 40px;}
.about .s1>div{display: flex;margin-top: 50px;flex-direction: column;}
.about .s1 figure{position: relative;order: 1;}
.about .s1 figure::before{content: "Original item";position: absolute;bottom: -26px;color: #FFBF00;right: 0;font-size: 50px;font-weight: 500;transform: rotate(-6deg);letter-spacing: -1px;font-family: "Allura", serif;}
.about .s1 figure img{display: block;width: 90%;height: auto;margin: auto;}
.about .s1>div p{font-size: 16px;order: 2;margin-top: 60px;}
.about .s1>div p b{display: block;position: relative;background-image: url(images/about_s1_title_bg.jpg);color: #fff;font-size: 22px;text-align: center;margin-bottom: 20px;padding: 8px 0;}
.about .s1>div p b span{color: #ff0000;}
.about .s1>div p b::before{content: "BRAND HISTORY";font-family: "Cormorant", serif;font-size: 40px;font-weight: lighter;position: absolute;bottom: 32px;color: #ccc;white-space: nowrap;left: 50%;transform: translate(-50%, 0);z-index: -1;}
.about .s1>div p>span{text-align: right;display: block;}




/*--------concept--------*/
.concept .s1{margin: auto;margin-top: 40px;}
.concept .s1 ul {margin-top: 90px;}
.concept .s1 ul li{display: flex;position: relative;flex-direction: column;background-color: #004860;}
.concept .s1 ul li figure{width: 100%;background-position: center;background-size: cover;height: 400px;position: relative;right: 0;clip-path: polygon(0% 100%, 0% 10%, 100% 0%, 100% 100%);}
.concept .s1 ul li:nth-of-type(n+2){margin-top: 80px;}
.concept .s1 ul li:nth-of-type(2) figure{}
.concept .s1 ul li:nth-of-type(2)>div{}
.concept .s1 ul li:nth-of-type(1) figure{background-image: url(images/concept_img1.jpg);}
.concept .s1 ul li:nth-of-type(2) figure{background-image: url(images/concept_img2.jpg);}
.concept .s1 ul li:nth-of-type(3) figure{background-image: url(images/concept_img3.jpg);}
.concept .s1 ul li>div{width: 100%;background-color: #004860;position:relative;display: flex;align-items: center;padding: 25px;box-sizing: border-box;}
.concept .s1 ul li>div::before{position: absolute;height: 120%;width: 60px;background-color: #fff;right: -50px;bottom: -10%;transform: rotate(15deg);}
.concept .s1 ul li:nth-of-type(2)>div{}
.concept .s1 ul li:nth-of-type(2)>div::before{}
.concept .s1 ul li:nth-of-type(2) .box{}
.concept .s1 ul li .box{width: 100%;color: #fff;}
.concept .s1 ul li small{position: absolute;top: -40px;left: 5%;color: #00465F;font-size: 28px;font-family: 'Teko';font-style: italic;font-weight: normal;letter-spacing: 2px;z-index: -1;}
.concept .s1 ul li small b{font-size: 36px;}
.concept .s1 ul li:nth-of-type(2) small{}
.concept .s1 ul li h2{font-size: 20px;position: relative;display: table;width: 100%;}
.concept .s1 ul li h2::after{content: "";border-top: 1px solid #fff;width: 100px;position: absolute;z-index: 1;top: 55px;left: 0;}
.concept .s1 ul li:nth-of-type(2) h2{}
.concept .s1 ul li:nth-of-type(2) h2::after{}
.concept .s1 ul li h2 span{font-size: 25px;}
.concept .s1 ul li p{margin-top: 30px;}






/*--------itemlist--------*/
.item .s1{width: 100%;margin: auto;margin-top: 40px;}
.item .s1 ul{display: flex;width: 95%;margin: auto;flex-wrap: wrap;justify-content: space-between;}
.item .s1 ul li{width: 48%;display: block;margin-top: 40px;}

.item .s1 ul li a{color: #000;text-decoration: none;}
.item .s1 ul li a img{display: block;width: 100%;height: auto;}
.item .s1 ul li a b{display: block;margin-top: 15px;font-weight: normal;font-size: 15px;}
.item .s1 ul li a span:nth-of-type(1){display: block;}
.item .s1 ul li a span:nth-of-type(1) small{font-size: 15px;}
.item .s1 ul li a span:nth-of-type(2){display: block;font-size: 14px;line-height: 1.4;margin-top: 10px;text-align: left;}




/*--------itemlist_detail--------*/
.detail .s1{width: 100%;margin: auto;margin-top: 40px;}
.detail .s1>div{margin: auto;display: flex;margin-top: 40px;align-items: center;flex-direction: column;width: 90%;}
.detail .s1 figure{}
.detail .s1 figure img{display: block;width: 100%;height: auto;}
.detail .s1>div div{margin-top: 10px;}
.detail .s1 table{border: 1px solid #ddd;border-collapse: collapse;width: 100%;}
.detail .s1 table th{text-align: left;padding: 10px 16px;box-sizing: border-box;border-bottom: 1px solid #eee;}
.detail .s1 table td{padding: 10px 16px;box-sizing: border-box;border-bottom: 1px solid #eee;}
.detail .s1 table td .cost{display: block;margin-top:5px;font-size: 18px;}
.detail .s1 table td .cost small{font-size: 14px;}
.detail .s1 table td a{display: table;background-color: #ff0000;color: #fff;text-decoration: none;padding: 5px 20px;border-collapse: separate;border-radius: 4px;margin-top: 15px;font-weight: bold;}
.detail .s1 table td a::before{content:"\25B8";}



/*--------original--------*/
.original .s1{width: 100%;margin: auto;margin-top: 70px;}
.original .s1>div{margin: auto;margin-top: 35px;width: 90%;}
.original .s1>div p{text-align: left;font-size: 16px;}


.original .s2{background-image: url(images/order_bg1.jpg);background-position: center;background-size: cover;z-index: 1;position: relative;margin-top: 45px;overflow: hidden;}
.original .s2::before{content: "";position: absolute;height: 200px;width: 200%;background-color: #fff;left: -55%;top: -100px;transform: rotate(-5deg);z-index: -1;}
.original .s2::after{content: "";position: absolute;height: 200px;width: 200%;background-color: #fff;left: -55%;bottom: -170px;transform: rotate(-5deg);z-index: -1;}
.original .s2 .head{display: flex;width: 90%;margin: auto;align-items:flex-end;flex-direction: column;}
.original .s2 .head figure{display: block;}
.original .s2 .head figure img{display: block;width: 80%;height: auto;margin: auto;}
.original .s2 .head h2{color: #FFFF4C;font-size: 24px;position: relative;text-align: center;}
.original .s2 .head h2 span{display: table;font-size: 17px;color: #fff;font-weight: normal;border:1px solid #fff;padding: 4px 16px;margin-bottom: 10px;position: relative;left: 50%;transform: translate(-50%,0);}
.original .s2 .head h2::before{content: "Ordernade";position: absolute;left: 50%;top: -70px;color: #FFBF00;font-size: 50px;font-weight: 500;transform: rotate(-6deg) translate(-50%, 0);letter-spacing: -1px;font-family: "Allura", serif;}
.original .s2 p{font-size: 16px;color: #fff;width: 90%;margin: auto;margin-top: 20px;/}
.original .s2 p a{display: table;padding: 12px 25px;position: relative;left: 50%;transform: translate(-50%,0);background-color:#FFFF4C;font-size: 18px;font-weight: bold;color: #000;text-decoration: none;border-radius: 4px;margin-top: 25px;}
.original .s2 p a::after{content: "\25B8";margin-left: 5px;}

.original .s2 .banner{margin: auto;margin-top: 100px;width: 90%;}
.original .s2 .banner h3{text-align: center;font-size: 20px;color: #fff;}
.original .s2 .banner h3 img{margin: auto;display: block;height: auto;margin-bottom: 10px;width: 180px;}
.original .s2 .banner ul{display: flex;align-items: flex-start;justify-content: center;margin-top: 0px;flex-direction: column;}
.original .s2 .banner ul li{display: block;display: flex;flex-direction: column;margin-top: 20px;}
.original .s2 .banner ul li img{width: 100%;height: auto;display: block;}
.original .s2 .banner ul li span{border: 1px solid #000;display: block;border-top: none;background-color:#004860;text-align: center;padding: 10px;}
.original .s2 .banner ul li a{color: #fff;text-decoration: none;font-size: 16px;}
.original .s2 .banner ul li a::before{content: "／";}
.original .s2 .banner ul li a:nth-of-type(1)::before{content: none;}

	
	
/*--------example--------*/	
.example .s1{width: 100%;margin: auto;margin-top: 70px;}
.example .s1 strong{display:block;text-align: left;font-size: 16px;margin: auto;margin-top: 25px;font-weight: normal;width: 90%;}
.example .s1 strong br{display:none;}	
.example .s1 ul{margin-top: 80px;background-color: #000;}
.example .s1 ul li{position: relative;margin-top: -50px;}
.example .s1 ul li figure{/position: relative;}
.example .s1 ul li:nth-of-type(even) figure{margin: 0 0 0 auto;}	
.example .s1 ul li figure img{width: 100%;height: auto;display: block;}
.example .s1 ul li div{width: 95%;position: relative;left: 5%;background-color: rgba(0,0,0,0.8);bottom: 45px;padding: 25px 30px 40px 30px;box-sizing: border-box;color: #fff;height: auto;}
.example .s1 ul li div::before{content:"";position: absolute;width: 60%;height: 25px;background-color: rgba(255,0,0,1);left: 0;top: -10px;display: block;z-index: 0;}
.example .s1 ul li:nth-of-type(even) div::before{left: 0px;}		
.example .s1 ul li:nth-of-type(even) div{left: 5%;right: auto;}
.example .s1 ul li:last-child div{padding-bottom: 0px;}	
.example .s1 ul li h3{font-size: 28px;font-family: "Montserrat", serif;}
.example .s1 ul li b{font-size: 20px;display: block;line-height: 1.5;}	
.example .s1 ul li p{margin-top: 15px;}	


/*--------post--------*/
.post .s1{display: flex;flex-direction: column;width: 90%;margin: auto;margin-top: 40px;}
.post .selecter{display:flex;justify-content:center;align-items:center;margin-bottom: -60px;margin-top: -5px;}
.post .selecter select{font-size:16px;margin-right:10px;padding:5px 10px;}
.post .s1 .container{margin-top: 100px;}
.post .s1 .container:last-child {margin-bottom:70px;}




/*--------postinitial--------*/
.post .container>h3{background-color: #f9f9f9;font-size: 17px;margin-bottom: 25px;color: #000;padding: 10px 20px;display: flex;border: 1px solid #ddd;border-radius: 3px;}
.post .container>h3::before{content: url(images/ec.png);margin-right: 5px;line-height: 0;margin-top: 8px;}
.post .container>time{display: block;align-items: center;justify-content: flex-end;margin-top: -25px;margin-bottom: -6px;font-size: 11px;text-align: right;}



.post .s1 .container>.inner h1{font-size: 18px;font-weight: bold;color: #000;}
.post .s1 .container>.inner h2{font-size: 17px;font-weight: bold;color: #000;}
.post .s1 .container>.inner h3,.post .s1 .container>.inner h4,.post .s1 .container>.inner h5,.post .s1 .container>.inner h6,.post .s1 .container>.inner b,.post .s1 .container>.inner em,.post .s1 .container>.inner p,.post .s1 .container>.inner span{font-size: 16px;font-weight: normal;color: #000;font-style: normal;margin:20px 0;}
.post .s1 .container>.inner ul{margin: 1em 0;}
.post .s1 .container>.inner ul li{margin-left: 25px;list-style-type: disc;}
.post .s1 .container>.inner ol{	margin: 1em 0;}
.post .s1 .container>.inner ol li{margin-left: 25px;list-style-type: decimal;}
.post .s1 .container>.inner a{color:#FF6600;}
.post .s1 .container>.inner a:hover{opacity: 0.4;transition: 0.4s ease-in-out;}
.post .s1 .container>.inner blockquote{display: inline;margin: 0;padding: 0;}
.post .s1 .container>.inner pre{display: inline;margin: 0;padding: 0;}
.post .s1 .container>.inner .alignright{display: block;margin: auto;margin-bottom: 0px;width: 100%;height: auto;}
.post .s1 .container>.inner .aligncenter{display: block;margin: auto;margin-bottom: 0px;width: 100%;height: auto;}
.post .s1 .container>.inner .alignleft{display: block;margin: auto;margin-bottom: 0px;width: 100%;height: auto;}
.post .s1 .container>.inner .alignnone{display: block;margin: auto;margin-bottom: 0px;width: 100%;height: auto;}

}