@charset "utf-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/* -------------------------------------------------------------- */

body{
color:#000;
font-size:62.5%;
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
line-height:1.5;
background-color:#fff;
word-break: break-all;
}

/* リンク設定
------------------------------------------------------------*/
html {
scroll-padding-top: 60px;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
a:active, a:focus {
color: #000;
text-decoration: underline;
}
.box_link a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box_link a:hover {
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
text-decoration: none;
}

/* 全体
------------------------------------------------------------*/
#wrapper {
width: 100%;
}
#content {
padding: 60px 0 0 0;
}
.item_waku {
width : 100%;
margin: 0 auto;
text-align: center;
display: flex;
flex-flow: column;
align-items: center;
}
.back_cream {
background-color: #f9f7f3;
}
.font-b {
font-weight: bold;
}
.txt_in1 {
padding-left: 1em;
text-indent: -1em;
}
.small {
font-size: 80%;
}
.small_m {
font-size: 73%;
}
.image {
width : 100%;
margin: 0 auto;
}
.image img {
width: 100%;
height: auto;
vertical-align:top;
}
.zen-maru {
font-family: "Zen Maru Gothic", serif;
font-weight: 500;
font-style: normal;
}
.br_pc {
display: none;
}
.sp_none {
display: none;
}
/* ヘッダー
------------------------------------------------------------*/
header {
position: fixed;
width: 100%;
height: 60px;
background-color: #fff;
z-index: 500;
}
.border_lav {
width: 100%;
height: 10px;
background-color: #b2a8b9;
}
#header_waku {
width: 100%;
height: 50px;
display:flex;
flex-flow: column;
}
#header_waku a:hover {
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
}
#header1 {
width: 100%;
height: 50px;
position: relative;
}
#header1 img{
width: 58%;
max-width: 132px;
height: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.hr_g {
width: 100%;
margin: 0 auto;
border-top: 1px solid #d2d3d3;
border-bottom: none;
border-left: none;
border-right: none;
}
.w_space {
width: 100%;
height: 5px;
background-color: #fff;
}
#header2 {
display: none;
}
#fixed_header_waku {
display: none;
}

/* ハンバーガーメニュー */
.menu-btn {
position: fixed;
top: 0;
right: 0;
display: flex;
height: 65px;
width: 65px;
justify-content: center;
align-items: center;
z-index: 998;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
content: '';
display: block;
height: 3px;
width: 30px;
background-color: #b2a8b9;
position: absolute;
}
.menu-btn span:before {
bottom: 10px;
}
.menu-btn span:after {
top: 10px;
}
#menu-btn-check:checked ~ .menu-btn span {
background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
bottom: 0;
transform: rotate(45deg);
background-color: #fff;
}
#menu-btn-check:checked ~ .menu-btn span::after {
top: 0;
transform: rotate(-45deg);
background-color: #fff;
}
#menu-btn-check {
display: none;
}

/* パネル */
.menu-content {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 100%;/*leftの値を変更してメニューを画面外へ*/
z-index: 600;
background-color:#fff;
transition: all 0.5s;/*アニメーション設定*/
}
.menu-content a:hover {
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
}
#panel_header {
width: 100%;
height: 60px;
background-color: #b2a8b9;
position: relative;
}
#panel_header img {
width: 58%;
max-width: 132px;
height: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.menu-content ul {
width: 85%;
margin: 0 auto;
padding: 40px 0 0 0;
}
.menu-content ul li {
list-style: none;
text-align: center;
position: relative;
}
.menu-content ul li:before {
background: radial-gradient(circle farthest-side, #000, #000 50%, transparent 50%, transparent);
background-size: 4px;
content: '';
display: inline-block;
height: 4px;
width: 100%;
margin:18px 0 13px 0;
}
.menu-content ul li:last-child::after {
background: radial-gradient(circle farthest-side, #000, #000 50%, transparent 50%, transparent);
background-size: 4px;
content: '';
display: inline-block;
height: 4px;
width: 100%;
margin:18px 0 13px 0;
}
.panel_en {
font-family: "Jost", sans-serif;
font-weight: 300;
font-optical-sizing: auto;
font-style: normal;
font-size: 1.5em;
letter-spacing: 2px;
text-indent: 2px;
}
.panel_jp {
position: absolute;
top: 50%;
right: 10px;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
font-size: 1.1em;
}
.menu-content ul li a {
display: block;
width: 100%;
box-sizing: border-box;
text-decoration: none;
position: relative;
}
#menu-btn-check:checked ~ .menu-content {
left: 0;/*メニューを画面内へ*/
}
#panel_add {
width: 85%;
margin: 10px auto;
line-height: 1.6em;
font-size: 1.3em;
}
/* スライドショー
------------------------------------------------------------*/
.slideshow_w {
background-color: #fff;
background-image: radial-gradient(#999 30%, transparent 30%);
background-size: 5px 5px;
text-align: center;
margin: 0 auto;
}
.slideshow_w img {
max-width: 1920px;
}
.slideshow {
width: 100%;
max-width: 1920px;
margin: 0 auto;
}
/* コンテンツ
------------------------------------------------------------*/
.top_midashi_waku {
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.top_midashi_en {
font-family: Futura, 'Century Gothic';
font-weight: 500;
font-size: 2em;
letter-spacing: 5px;
text-indent: 5px;
margin: 0 auto;
}
.top_midashi_jp {
font-size: 1.6em;
letter-spacing: 2px;
text-indent: 2px;
margin: 15px auto 25px auto;
}
.txt {
width: 90%;
max-width: 800px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.txt p {
margin: 20px auto;
font-size: 1.5em;
line-height: 2.1em;
text-align: justify;
}
.w_button {
width: 100%;
height: 39px;
display: flex;
justify-content: flex-end;
}
.w_button a {
width: 195px;
height: 39px;
text-align: center;
line-height: 37px;
font-size: 1.5em;
letter-spacing: 2px;
text-indent: 2px;
position: relative;
color: #787878;
background-color: #fff;
display: block;
text-decoration: none;
box-sizing: border-box;
border: 1px solid #787878;
}
.w_button a::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-left: 8px solid #787878;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
top: 0;
bottom: 0;
right: 10px;
margin: auto;
}
.w_button a:hover {
background-color: #b2a8b9;
color: #fff;
border: 1px solid #b2a8b9;
}
.w_button a:hover::after {
border-left-color: #fff;
}
.o_obi_w {
width: 100%;
text-align: left;
}
.o_obi_w2 {
position: relative;
}
.o_obi {
display: inline-flex;
align-items: center;
background-color: #e6d3cb;
border-radius: 0 2.5em 2.5em 0; 
padding: 0.5em 2em 0.5em 5%; 
min-height: 35px;
line-height: 1.2em;
min-width: 75%;
max-width: 95%;
box-sizing: border-box;
}
/* 2行以上の帯 */
.o_obi.multiline {
border-radius: 0 3em 3em 0; 
padding-top: 0.75em;
padding-bottom: 0.75em;
padding-right: 2em;
min-height: 50px;           
}
.o_obi_txt {
margin: 0;
font-size: 1.6em;
line-height: 1.2em;
}
.o_obi_txt2 {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -45%);
white-space: nowrap;
text-align: center;
}

/* トップ-お知らせ
------------------------------------------------------------*/
.top_news {
padding: 30px 0 50px 0;
}
#top_news_w {
width: 85%;
max-width: 980px;
margin: 40px auto 0 auto;
}
.top_news5 {
width: 100%;
margin: 0 auto 20px auto;
display: flex;
flex-direction: column;
}
.top_news_date {
width: 100%;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
font-size: 1.5em;
color: #808080;
text-align: left;
position: relative;
z-index: 2;
}
.new_red {
color: #dc0014;
margin: 0 15px;
}
.top_news_txt_wrapper {
position: relative;
z-index: 2;
}
.top_news_txt {
width: 100%;
font-size: 1.5em;
text-align: justify;
margin-bottom: 8px;
box-sizing: border-box;
padding: 0;
}
.dotted_line {
width: 100%;
height: 4px;
background: radial-gradient(circle farthest-side, #cacaca, #cacaca 50%, transparent 50%, transparent);
background-size: 4px 4px;
background-repeat: repeat-x;
z-index: 3;
pointer-events: none;
position: relative;
}


/* トップ-品質
------------------------------------------------------------*/
.top_quality {
padding: 0 0 50px 0;
}
/* トップ-OEM
------------------------------------------------------------*/
.top_oem {
padding: 50px 0;
}
/* トップ-プリント注文、フルオーダー注文
------------------------------------------------------------*/
.top_order {
display: flex;
flex-direction: column;
}
.top_print {
width: 100%;
padding: 50px 0;
background-color: #facfc0;
}
.top_woven {
width: 100%;
padding: 50px 0;
background-color: #b9cbd3;
}
.top_order_en {
width: 40%;
max-width: 350px;
font-family: Futura, 'Century Gothic';
font-weight: 500;
font-size: 2em;
margin: 0 auto;
}
.top_order_tw {
margin: 0 auto;
width: 50%;
max-width: 350px;
aspect-ratio: 35 / 31;
max-height: 310px;
position: relative;
z-index: 1;
}
.top_order_base {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
}
.top_order_b {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 3;
}
.top_order_txt_w {
width: 90%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.top_order_txt_title {
margin: 30px 0 0 0;
font-size: 1.8em;
font-weight: bold;
}
.top_order_naiyou {
margin: 10px auto 20px auto;
font-size: 1.5em;
line-height: 2.1em;
text-align: justify;
}
.order_button_wrapper {
width: 100%;
}
/* トップ-注文から納品まで
------------------------------------------------------------*/
.top_howto {
padding: 30px 0 50px 0;
}
#howto_waku {
width: 90%;
max-width: 325px;
margin: 20px auto 0 auto;
display: flex;
flex-direction: column;
}
#howto_waku img {
width: 100%;
height: auto;
margin: 5px auto;
}
/* トップ-会社案内
------------------------------------------------------------*/
.top_company {
padding: 30px 0;
}
#top_company1_waku {
background-color: #b2a8b9;
width: 100%;
margin: 30px auto;
padding: 20px 0;
}
#top_company1_w {
width: 60%;
max-width: 360px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.top_company1_b {
width: 100%;
max-width: 360px;
aspect-ratio: 6 / 5;
position: relative;
margin: 15px auto;
}
.top_company1_bb {
width:100%;
height: auto;
position: absolute;
top:0;
left:0;
}
.top_company1_bt {
width:100%;
height: auto;
position: absolute;
top:0;
left:0;
}
#top_company2_waku {
width: 90%;
max-width: 960px;
margin: 30px auto;
display: grid;
grid-template-columns: repeat(2, minmax(0, 216px));
gap: 24px;
justify-content: center;
box-sizing: border-box;
}
.top_company2_b {
width: 100%;
max-width: 216px;
display: flex;
flex-direction: column;
justify-content: flex-start;
position: relative;
box-sizing: border-box;
}
.top_company2_img {
width: 100%;
}
.top_company2_img img {
width: 100%;
height: auto;
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.4);
}
.top_company2_txt {
width: 100%;
display: grid;
grid-template-rows: auto auto;
align-items: start;
text-align: center;
}
.top_company2_m {
font-size: 1.6em;
font-weight: bold;
margin: 5px auto;
}
.top_company2_n {
font-size: 1.4em;
}
.diagonal {
width: 100%;
height: 20px;
background:repeating-linear-gradient(-45deg,#fff,#fff 1px,#b2a8b9 0,#b2a8b9 29px);
margin: 0 auto;
}
/* トップ-オンラインショップ
------------------------------------------------------------*/
.top_shop {
padding: 20px 0 0 0;
}
#shop_waku {
width: 90%;
max-width: 850px;
display: flex;
flex-direction: column;
justify-content: center;
margin: 20px auto 50px auto;
}
.top_shop_img1 {
width: 40%;
max-width: 315px;
}
.top_shop_txt {
width: 100%;
display: flex;
flex-direction: column;
}
.top_shop_txt p {
font-size: 1.5em;
line-height: 1.7em;
text-align: justify;
margin: 0 auto 20px auto;
}
.top_shop_txt img {
width: 40%;
max-width: 285px;
height: auto;
margin: 20px auto;
}
.top_shop_img2 {
width: 100%;
max-width: 1920px;
}
.to_shop a {
text-align: left;
letter-spacing: 0;
padding-left: 15px;
}
/* フッター1
------------------------------------------------------------*/
.footer1 {
background-color: #f9f7f3;
padding: 30px 0;
margin: 0 auto;
}
.footer1 img {
width: 100%;
max-width: 132px;
height: auto;
margin: 0 auto 20px auto;
}
.footer1 a:hover {
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
text-decoration: none;
}
.footer1_tel {
display: flex;
margin: 0 auto;
}
.footer1_tel_l {
align-self: baseline;
margin-right: 10px;
}
.footer1_tel_l span {
background-color: #ff0000;
border-radius: 3px;
padding: 0 3px;
font-family: "Jost", sans-serif;
font-weight: 600;
font-optical-sizing: auto;
font-style: normal;
font-size: 1.3em;
color: #fff;
}
.footer1_tel_r {
align-self: baseline;
display: flex;
flex-direction: column;
}
#tel_num {
font-family: "Cormorant Garamond", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 2.9em;
}
#open {
font-size: 1.5em;
color: #5a5a5a;
}
/* フッター2
------------------------------------------------------------*/
.footer2 {
background-color: #f9f7f3;
}
#sitemap {
width: 90%;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
#sitemap a:hover {
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
text-decoration: none;
}
.sitemap_waku {
width: 100%;
margin: 0 auto 20px auto;
}
#sitemap dl {
width: 100%;
text-align: left;
margin-bottom: 15px;
}
#sitemap dt {
font-weight: bold;
font-size: 1.7em;
margin-bottom: 5px;
}
#sitemap dt a {
color: #77559f;
}
#sitemap dd {
font-size: 1.4em;
align-items: center;
position: relative;
padding-left: 20px;
line-height: 1.7em;
}
#sitemap dd::before {
content: "";
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 5px;
width: 5px;
height: 5px;
border-top: 3px solid #77559f;
border-right: 3px solid #77559f;
transform: rotate(45deg);
}
.sitemap_koumoku {
text-align: left;
margin-bottom: 15px;
}
.sitemap_koumoku a {
color: #77559f;
font-weight: bold;
font-size: 1.7em;
}
/* フッター3
------------------------------------------------------------*/
.footer3 {
background-color: #f9f7f3;
padding: 20px 0;
}
.footer3 ul {
display: flex;
flex-direction: column;
margin: 0 auto;
}
.footer3 ul li {
margin: 0 auto;
font-size: 1.5em;
}
/* コピーライト
------------------------------------------------------------*/
.copyright {
margin: 0 auto;
padding: 20px 0;
background-color: #d7cbb7;
}
.copyright a {
font-size: 1.3em;
color: #fff;
letter-spacing: 2px;
margin-right: -2px;
text-decoration: none;
}
.copyright a:hover {
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff;
text-decoration: none;
}
/* ページトップボタン
------------------------------------------------------------*/
.pagetop{
position: fixed;
bottom: 20px;
right: 10px;
z-index: 999;
}
.pagetop img {
width: 80%;
max-width: 70px;
height: auto;
}
.pagetop a{
display: block;
text-decoration: none;
}
.pagetop:hover {
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
}