@charset "UTF-8";
/* CSS Document */
@media only screen and (max-width: 1600px) {
/* -------------------------------------------------
layout
----------------------------------------------------*/
  
/* ====================================
index.html
====================================== */
  .mid-conts { width: 100%;}
  
  .figure-r {
    float: right;
    margin-left: 0;
  }  
  
}

@media only screen and (max-width: 1425px) {
	
	.style-name { font-size: 1.42vw;}
  
  

/* ====================================
製品紹介 - 詳細ページ
====================================== */
	.product-wrap { padding-bottom: 0;}
	
	.photo-area .photo-L li {
		width: 100%;
		height: 48.4vw;
	}
  
	.photo-thumb li {
		width: 20%;
		height: 9.68vw;
		margin-right: 6.6%;
		margin-bottom: 15px;
	}
	.photo-thumb li:nth-of-type(2n) { margin-right: 6.6%;}
	
	.photo-thumb li:nth-last-of-type(1) { margin-right: 0;}
	
	.sunpou-area .sample-img {
		width: 100%;
		height: auto;
	}

	
}

@media only screen and (max-width: 1366px) {  


  
}
	
@media only screen and (max-width: 1280px) {
/* -------------------------------------------------
layout
----------------------------------------------------*/
  /* ===== global nav ===== */
  .g-nav {
    display: flex;
    justify-content: space-around;
    width: calc((100% - 154px - 6vw) / 2);
  }
  
  .g-nav li {
    display: inherit;
    padding: 0;
  }
  
/* ====================================
index.html
====================================== */
  .figure-r { padding: 6vw 0;}
  
  /* contents nav */
  .c-nav-box p {
    width: 100%;
    font-size: 1.35vw;
  }
  
  .c-nav-box .en { font-size: 2.1vw;}
  
  .news-wrap { padding: 80px 100px;}
	
	.s-conts-box .s-conts-ttl { font-size: 2.2rem;}
  
  

/* ====================================
スタイル
====================================== */
  .chara-box { width: 48%;}
  
  .chara-box .img-area { width: 36%;}
  
  .chara-box .img-area img {
    width: 100%;
    height: auto;
  }
  
  .chara-box .txt-area { padding: 0 0 0 5%;}
  
/* ====================================
オプション
====================================== */   
  .opt-box-wrap { margin-bottom: 90px;}  
  
  .opt-box-wrap .img-area { margin-right: 3%;}
  
  .cat-opt { margin-top: 0;}
  
 
}





@media only screen and (max-width: 960px) {
/* -------------------------------------------------
layout
----------------------------------------------------*/
  .br960 { display: block;}
  
/* ===== header ===== */
  
  .h-logo {
    width: 154px;
    margin: 0 3vw;
  }
  
  .h-logo img {
    width: 100%;
    height: auto;
  }

/* ===== main visual ===== */


/* ===== global nav ===== */
  .g-nav {
    display: flex;
    justify-content: space-around;
    width: calc((100% - 154px - 6vw) / 2);
  }
  
  .g-nav li {
    display: inherit;
    padding: 0;
  }

/* ===== footer ===== */
  footer { padding: 70px 2% 74px;}
  
  .footer-inner > p { width: 100%;}
  
  .footer-inner > p img {
    width: 198px;
    height: auto;
  }
  
  .footer-inner > p span.add br.w600 { display: block;}
  
  .footer-inner > p span.add { line-height: 1.3;}
  
  .foot-conts li { margin-left: 2.5vw;}
  
  @media only screen and (min-width: 601px) and (max-width: 767px) {
  
    .foot-conts {
      top: inherit;
      bottom: 0;
      margin-bottom: 10px;
    }

    .foot-conts ul { display: none;}
    
  }
  

/*pageTop*/


/* ====================================
index.html
====================================== */
  .top-intro {
    padding: 52px 5% 59px;
    margin: 0 auto 30px;    
  }
  
  .mid-conts {
    width: 96%;
    margin: 0 auto 50px;
  }
  
  .mid-conts .figure-l,
  .mid-conts .figure-r {
    position: inherit;
    display: block;
  }
  
  .mid-conts .figure-l {
    width: 100%;
    height: 53vw;
  }
  
  .mid-conts .figure-r {
    float: none;
    max-width: none;
    padding: 0;
    margin-left: 0;
  }
  
  .fig-inner { padding: 15px 3%;}
  
  .fig-inner p { font-size: 1.8rem;}
  
  .fig-inner ul.link-path li {
    min-width: auto;
    margin-bottom: 18px;
  }
  .fig-inner ul.link-path li:nth-last-of-type(1) { margin-right: 0;}
  
  .fig-inner ul.link-path li a { font-size: 1.8rem;}
  
  .c-nav-wrap {
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 50px;
  }
  
  .c-nav-box {
    width: 33.333%;
    height: 33.3vw;
    margin-bottom: 0;
  }
  
  .c-nav-box:nth-of-type(4),
  .c-nav-box:nth-of-type(5) { width: 50%;}
  
  .c-nav-box p { font-size: 1.8rem;}
  
  .c-nav-box .en { font-size: 3.2vw;}
  
  .news-wrap { padding: 80px 5%;}
  
  .news-wrap h2 { margin-bottom: 0;}
  
  .news-lists { flex-wrap: wrap;}
  
  .news-lists dl {
    width: 100%;
    min-height: inherit;
    border-left: none;
    border-top: 1px solid #e9e9e9;
    padding: 30px;
  }





/* -------------------------------------------------
sub-layout
----------------------------------------------------*/
	.sub-conts-in { padding: 48px 0 80px;}
	
	.sub-conts-ttl { margin-bottom: 48px;}
  
  

/* ====================================
スタイル
====================================== */
	.suit-box { width: 50%;}
	
	.s-des-box .des-img { width: 37.68%;}
	
	.s-conts-box { padding: 20px;}
	
	.s-conts-box .s-conts-ttl { font-size: 2.6vw;}
	
	.style-name { font-size: 2.3rem;}
  
  .chara-wrap {
    padding: 3vw 3%;
    margin: 0 3% 30px;
  }
  
  .chara-inner { padding: 4vw 5%;}
  
  .chara-box {
    width: 100%;
    margin-bottom: 20px !important;
  }
  
  .chara-box .img-area { width: 30.8%;}
  
  .chara-box .img-area img {
    width: 100%;
    height: auto;
  }
  
  .chara-box .txt-area { padding: 0 0 0 5%;}
  

  
  

/* ====================================
ご注文の流れ
====================================== */	
	.o-intro-l,
	.o-intro-r { width: 100%;}
	
	.flow-wrap::before { left: 32px;}
	
	.flow-area .head-area .circle {
		width: 66px;
		height: 66px;
		line-height: 66px;
		margin-right: 20px;
	}
	
	.flow-conts { padding-left: 94px;}
  
  .flow-conts .txt-area { padding: 0 0 0 20px;}
	
	.flow-conts p { padding: 0;}
	
	.after-follow { padding: 25px 5%;}
	
	.after-follow p:nth-of-type(2) { line-height: 1.5;}
  
  

/* ====================================
製品紹介
====================================== */	
	.items-box {
		width: 48%;
	}
	
	.items-box:nth-of-type(3n-1) { margin: 0;}
	
	.items-box:nth-of-type(2n) { margin-left: 4%;}
  
  

/* ====================================
製品紹介 - 詳細ページ
====================================== */	
	.photo-area .photo-L li {
		width: 100%;
		height: 48.4vw;
	}
  
	.photo-thumb li {
		width: 20%;
		height: 9.68vw;
		margin-right: 6.6%;
		margin-bottom: 15px;
	}
	.photo-thumb li:nth-of-type(2n) { margin-right: 6.6%;}
	
	.photo-thumb li:nth-last-of-type(1) { margin-right: 0;}
	
	.sunpou-area .sample-img {
		width: 100%;
		height: auto;
	}
  
  

/* ====================================
よくある質問
====================================== */
	.faq-area .q-area,
	.faq-area .a-area { padding: 0 5%;}
  
  

/* ====================================
店舗情報
====================================== */
	.shop-info img {
		width: 100%;
		height: auto;
	}
  
  

/* ====================================
オプション
====================================== */  
  @media only screen and (min-width: 601px) and (max-width: 750px) {
    .opt-sub-conts {
      background: url("../images/option_conts_img03@sp.jpg") no-repeat center top;
      background-size: contain;
    }
  }
  
  @media only screen and (min-width: 601px) and (max-width: 768px) {
  
    .opt-box-wrap { margin: 0 2% 80px;}

    .opt-box-wrap .img-area,
    .cat-opt { width: 100%;}

    .opt-box-wrap .img-area {
      max-width: none;
      margin-right: 0;
    }

    .opt-box-wrap .img-area img {
      width: 100%;
      height: auto;
    }
    
  }
  
  .opt-conts-box { padding: 20px;}
	
	
 
}






@media only screen and (max-width: 600px) {
	/* -------------------------------------------------
layout
----------------------------------------------------*/
  .br960 { display: none;}

/* ===== header ===== */
  h1 { display: none;}
  
  .sp-header { display: block;}
  
  .header-inner { padding: 20px 0;}

/* ===== main visual ===== */
  .mv { height: 100vw;}

/* ===== global nav ===== */
  .g-nav { display: none;}
  
  .drawer-nav {
    border-top: 2px solid #996b37;
    padding-top: 30px;
  }
  
  .sp-gnav-wrap li a {
    display: block;
    position: relative;
    font-family: 'Noto Serif Japanese' !important;
    color: #14375b;
    font-size: 1.5rem;
    text-align: center;
    padding: 20px 0;
  }
  
  .sp-gnav-wrap li a:after {
    display: block;    
    content: "";
    width: 20px;
    height: 2px;
    border-bottom: 1px dotted #14375b;
    margin: 8px auto 0;
  }
  
  
  /* ハンバーガーメニューcss */
  .menu-trigger,
  .menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
  }

  .menu-trigger {
    position: relative;
    width: 30px;
    height: 30px;
  }

  .menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #14375b;
  }

  .menu-trigger span:nth-of-type(1) { top: 0;}

  .menu-trigger span:nth-of-type(2) { top: 15px;}

  .menu-trigger span:nth-of-type(3) { bottom: 0;}
  
  .drawer-open .menu-trigger span:nth-of-type(1) {
    -webkit-transform: translateY(15px) rotate(-45deg);
    transform: translateY(15px) rotate(-45deg);
  }
  
  .drawer-open .menu-trigger span:nth-of-type(2) { opacity: 0;}
  
  .drawer-open .menu-trigger span:nth-of-type(3) {
    -webkit-transform: translateY(-14px) rotate(45deg);
    transform: translateY(-14px) rotate(45deg);
  }

/* ===== footer ===== */
  footer { padding: 0 5%;}
  
  .footer-inner { padding: 56px 0 59px;}
  
  .foot-conts {
    top: inherit;
    bottom: 0;
    margin-bottom: 10px;
  }
  
  .foot-conts ul { display: none;}

/*pageTop*/
  .pt img { width: 50px;}

/* ====================================
index.html
====================================== */
  .top-conts-wrap { margin-top: -122px;}
  
  .top-intro { padding: 42px 5% 47px;}
  
  .top-intro p.head-txt {
    font-size: 2.5rem;
    margin-bottom: 17px;
  }
  
  .top-intro p:nth-of-type(2) {
		text-align: left;
		line-height: 1.8;
	}
  
  /* contents nav */  
  .c-nav-box {
    width: 100% !important;
    height: 100vw !important;
    margin-bottom: 5px;
  }
  
  .c-nav-box p {
    bottom: 50%;
    font-size: 1.8rem;
    transform: translate(-50%, 50%);
  }
  
  .c-nav-box .en { font-size: 3.0rem;}
  
  /* news */
  .news-wrap { padding: 40px 5%;}
  
  .news-lists dl { padding: 15px;}




/* -------------------------------------------------
sub-layout
----------------------------------------------------*/
  .page-ttl-img { height: 35vw;}
  
  .page-ttl { margin: 0 auto 40px;}
	
	.sub-conts-ttl { font-size: 7.0vw;}
  
  

/* ====================================
スタイル
====================================== */
  .suit-box { width: 100%;}
  
  .s-des-box .des-img { width: 31%;}
  
  .suit-sub-conts {
    background: url("../images/suit_conts_img01.jpg") no-repeat center top;
    background-size: 200% auto;
    padding-top: 35%;
  }
  
  .suit-sub-conts-in { border-left: none;}
  
  .s-conts-box {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e9e9e9;
    padding: 20px 3%;
  }
  
  .s-conts-box .s-conts-ttl { font-size: 2.2rem;}
  
  .chara-wrap {
    padding: 8px;
    margin: 0 2% 30px;
  }
  
  .chara-inner { padding: 15px 5%;}
  
  .chara-box { margin-bottom: 20px !important;}
  
  .chara-box .img-area { width: 36%;}
  
  .chara-box .img-area img {
    width: 100%;
    height: auto;
  }
  
  .chara-box .txt-area { padding: 0 0 0 5%;}
  
  .chara-box .txt-area p {
    font-size: 1.4rem;
    line-height: 1.5;
  }
  
  
  

/* ====================================
ご注文の流れ
====================================== */
	.order-intro, .flow-wrap, .after-follow { width: 90%;}
	
	.flow-wrap:before { left: 32px;}
	
	.flow-area { margin-bottom: 0;}
	
	.flow-area .head-area p {
		width: 72%;
		vertical-align: middle;
	}
	
	.flow-conts .img-area,
	.flow-conts .txt-area { display: block;}
	
	.flow-conts .img-area { width: 100%;}
	
	.flow-conts .txt-area { padding: 20px 0 0;}
  
  .flow-conts p {
    font-size: 1.4rem;
    margin-bottom: 1em;
  }
  
  

/* ====================================
製品紹介
====================================== */	
	.items-conts-wrap { width: 90%;}
	
	.side-bar,
	.items-main-conts { width: 100%;}
	
	.items-main-conts { order: 1;}
	.side-bar { order: 2;}
	
	.items-box { width: 100%;}
	
	.items-box:nth-of-type(3n-1) { margin: 0 0 50px !important;}
  
  

/* ====================================
製品紹介 - 詳細ページ
====================================== */	
	.product-wrap { padding-bottom: 0;}
	
	.photo-area,
	.item-des-wrap { width: 100%;}
	
	.photo-area .photo-L li { height: 107.6vw;}
  
	.photo-thumb li {
		width: 48%;
		height: 51.7vw;
		margin-right: 4%;
		margin-bottom: 15px;
	}
	.photo-thumb li:nth-of-type(2n) { margin-right: 0;}
  
  

/* ====================================
よくある質問
====================================== */
	.faq-area .q-area,
	.faq-area .a-area { padding: 0;}
  
  

/* ====================================
店舗情報
====================================== */
	.form-wrap label { margin-right: 20px;}

  .form .form-contents form dl dt:not(.pattern-exclusion) {
    width: 100%;
  }
  
  .form .form-contents form dl dd:not(.pattern-exclusion) {
    padding-left: 0;
  }

/* ====================================
オプション
====================================== */
  .opt-sub-conts {
    background: url("../images/option_conts_img03@sp.jpg") no-repeat center top;
    background-size: contain;
    padding-top: 60%;
  }
  
  .opt-box-wrap { margin: 0 2% 80px;}
  
  .opt-box-wrap .img-area,
  .cat-opt {
    width: 100%;
    max-width: none;
  }
  
  .opt-box-wrap .img-area { margin-right: 0;}
  
  .opt-box-wrap .img-area img {
    width: 100%;
    height: auto;
  }
  
  
  .opt-sub-conts-in { border-left: none;}
  
  .opt-conts-box {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e9e9e9;
    padding: 20px 3%;
  }
  
  .opt-conts-box .opt-conts-ttl { font-size: 2.2rem;}
  
  .opt-tbl dt { width: 44%;}
  



}