@charset "utf-8";
/* CSS Document */

/*------------------------------------
    共通
------------------------------------*/
/*拡大*/
a.popupImg{
    display: block;
    position: relative;
}
a.popupImg:after{
    content: "＋";
    display: block;
    background-color: #000;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 30px;
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 5px;
    top: 42px;
}

/*------------------------------------
    上部メイン画像
------------------------------------*/
.mainTitle{
	width: 100%;
	margin: 0 auto 30px;
}
.mainTitle h2{
    background-color: #000;
	margin: 0 0 10px;
    text-align: center;
}
.mainTitle h2 span{
    display: inline-block;
    position: relative;
}
.mainTitle h2 span:before,
.mainTitle h2 span:after{
    content: "";
    display: block;
    width: 80px;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.mainTitle h2 span:before{
    background-image: linear-gradient(to right, #000 0%, transparent 100%);
    left: 0;
}
.mainTitle h2 span:after{
    background-image: linear-gradient(to left, #000 0%, transparent 100%);
    right: 0;
}

.mainTitle h3{
    background-color: #000;
    color: #fff;
	margin: 0 0 20px;
    padding: 5px;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.5em;
    text-align: center;
    letter-spacing: 0.15em;
}
.mainTitle h3 b{
    color: #ff3636;
}

.mainTitle .readmore{
    width: 1200px;
    margin: auto;
}


@media screen and (max-width: 768px) {
	.mainTitle{
		width: 100%;
	}
	.mainTitle h2 span:before,
	.mainTitle h2 span:after{
		width: 7%;
	}
    .mainTitle .readmore{
        width: 95%;
    }
}
@media screen and (max-width: 480px) {
    .mainTitle h3{
        font-size: 22px;
    }
    .mainTitle h3 b{
        display: inline-block;
    }
}

/*------------------------------------
    上部シーン例
------------------------------------*/
.sceneCont{
    margin: 50px auto;
}
.sceneCont h3{
    border-top: 2px solid #c7b664;
    border-bottom: 2px solid #c7b664;
}

.sceneCont h3 + p{
    width: 1200px;
	margin: 0 auto 30px;
}

.sceneCont .inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 1200px;
    margin: 0 auto 50px;
}
.sceneCont .inner .sceneRecord{
    width: 550px;
}
.sceneCont .inner .sceneRecord p{
    background-color: #666;
    color: #fff;
    height: 50px;
    font-size: 22px;
    line-height: 50px;
    text-align: center;
}
.sceneCont .inner > p{
    margin-top: 20px;
}

.sceneCont .school .sceneRecord p{
    background-color: #141049;
}
.sceneCont .win .sceneRecord p{
    background-color: #533406;
}
.sceneCont .club .sceneRecord p{
    background-color: #163200;
}

/*実績スライド*/
.swiper-button-prev,
.swiper-button-next{
	background-color: rgba(255,255,255,0);
    background-image: none;
	height: auto;
	top: 0;
	bottom: 0;
	margin: auto;
	transition: all 0.2s ease-out;
}
.swiper-button-prev:hover,
.swiper-button-next:hover{
	background-color: rgba(255,255,255,0.6);
	opacity: 0.7;
}
.swiper-button-prev{
	left: 0;
}
.swiper-button-next{
	right: 0;
}

.swiper-button-prev:after,
.swiper-button-next:after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.swiper-button-prev:after{
    left: -5px;
    border-right: 15px solid #240807;
}
.swiper-button-next:after{
    right: -5px;
    border-left: 15px solid #240807;
}


@media screen and (max-width: 768px) {
	.sceneCont h3 + p{
		width: 95%;
	}
    .sceneCont .inner{
        width: 95%;
        margin: 0 auto 50px;
    }
    .sceneCont .inner h4{
        margin: 0 auto;
    }
    .sceneCont .inner .sceneRecord{
        width: 100%;
        max-width: 550px;
        margin: auto;
    }
}

/*------------------------------------
    カラム構造
------------------------------------*/
#container{
    display: flex;
    justify-content: space-between;
}

/*------左メインコンテンツ------*/
#container .mainContents{
    width: 890px;
    margin: 0;
    position: relative;
}

/*------追従ナビ------*/
#container nav.sideLink{
    width: 280px;
    margin: 0;
}
#container nav.sideLink > ul{
    position: sticky;
    top: 40px;
}
#container nav.sideLink > ul > li{
    margin-bottom: 15px;
}
#container nav.sideLink > ul > li > a,
#container nav.sideLink > ul > li > span{
    display: block;
    background-color: #c19600;
    color: #fff;
    padding: 13px 20px;
    font-size: 16px;
    position: relative;
}
#container nav.sideLink > ul > li a:before{
    content: "";
    display: block;
    width: 55px;
	background-repeat: no-repeat;
	background-position: center;
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    margin: auto;
}
#container nav.sideLink > ul > li > a:after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-top: 10px solid #614335;
    position: absolute;
    right: 15px;
    top: 7px;
    bottom: 0;
    margin: auto;
}

#container nav.sideLink > ul > li ul.subLink{
    margin: 10px 0 20px;
}
#container nav.sideLink > ul > li ul.subLink li{
    color: #3b1a08;
    font-size: 16px;
}
#container nav.sideLink > ul > li ul.subLink li a{
    display: block;
    padding: 5px;
    padding-left: 20px;
    position: relative;
}
#container nav.sideLink > ul > li ul.subLink li a:hover{
    background-color: #f4db83;
    opacity: 1;
}

#container nav.sideLink > ul > li ul.subLink li a:after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-top: 10px solid #614335;
    position: absolute;
    right: 15px;
    top: 7px;
    bottom: 0;
    margin: auto;
}


/*見積り*/
#container nav.sideLink ul li.estimate a{
	background-color: #ad0000;
    font-weight: bold;
}
#container nav.sideLink ul li.estimate a:after{
    border-top: 12px solid #fff;
}


@media screen and (max-width: 768px) {
    #container{
        display: block;
    }

    /*------左メインコンテンツ------*/
    #container .mainContents{
        width: 100%;
    }
    /*------追従ナビ------*/
    #container nav.sideLink{
        display: none;
    }
}

/*-----------------------------------
　コンテンツ/サポート
------------------------------------*/
.supportCont{
    margin-bottom: 40px;
}
.supportCont h3{
    background-color: #240807;
    color: #fff;
    margin-bottom: 20px;
    font-size: 33px;
    font-weight: bold;
    line-height: 1.8em;
    letter-spacing: 0.0.8em;
    text-align: center;
    border-top: 2px solid #c7b664;
    border-bottom: 2px solid #c7b664;
}
.supportCont h3 b{
    color: #f8e681;
}

.supportCont .inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 30px auto;
}
.supportCont .inner dl{
    width: 420px;
}
.supportCont .inner dl dt{
    color: #720501;
    margin-bottom: 15px;
    font-size: 23px;
    line-height: 1.5em;
    border-bottom: 1px solid #720501;
}
.supportCont .inner dl dt b{
    color: #e30000;
    font-size: 30px;
}
.supportCont .inner dl dd p{
    line-height: 2.2em;
}

/*record*/
.supportCont .record{
    flex-direction: row-reverse;
}
.supportCont .record dl dt,
.supportCont .record dl dd{
    padding-left: 30px;
}
/*record*/
.supportCont .staff dl dt,
.supportCont .staff dl dd{
    padding-right: 30px;
}


@media screen and (max-width: 768px) {
    .supportCont h3{
        font-size: 30px;
    }

    .supportCont .inner{
        width: 95%;
        margin: 30px auto;
    }
    .supportCont .inner > div{
        width: 45%;
    }
    .supportCont .inner dl{
        width: 55%;
    }
}
@media screen and (max-width: 480px) {
    .supportCont h3{
        padding: 5px 10px;
        font-size: 25px;
        line-height: 1.3em;
    }

    .supportCont .inner{
        width: 95%;
        margin: 30px auto;
    }
    .supportCont .inner > div{
        width: 100%;
    }
    .supportCont .inner dl{
        width: 100%;
        margin-bottom: 20px;
    }
    /*record*/
    .supportCont .record{
        flex-direction: row-reverse;
    }
    .supportCont .record dl dt,
    .supportCont .record dl dd{
        padding-left: 0;
    }
    /*record*/
    .supportCont .staff dl dt,
    .supportCont .staff dl dd{
        padding-right: 0;
    }

}

/*-----------------------------------
　再現
------------------------------------*/
.revivalCont{
    margin-bottom: 40px;
}
.revivalCont h3{
    background-color: #000;
    color: #fff;
    margin-bottom: 10px;
    font-size: 36px;
    line-height: 1.5em;
    text-align: center;
}
.revivalCont h3 b{
    color: #e30000;
    font-size: 45px;
    line-height: 1.5em;
}

.revivalCont h3 + img{
    margin-bottom: 10px;
}
.revivalCont h3 + img + p{
    margin-bottom: 30px;
    color: #da2525;
    text-align: right;
}
.revivalCont section{
    margin-bottom: 40px;
}
.revivalCont section h4{
    background-color: #f1dada;
    color: #5b1919;
    margin-bottom: 15px;
    padding: 5px 0;
    font-size: 30px;
    line-height: 1.3em;
    text-align: center;
}
.revivalCont section img{
    margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
    .revivalCont h3{
        font-size: 32px;
    }
    .revivalCont h3 b{
        font-size: 38px;
    }

    .revivalCont h3 + img + p{
        width: 95%;
        margin: 0 auto 30px;
    }
    .revivalCont section{
        width: 95%;
        margin: 0 auto 40px;
    }
}
@media screen and (max-width: 480px) {
    .revivalCont h3{
        font-size: 26px;
    }
    .revivalCont h3 b{
        font-size: 30px;
    }

    .revivalCont section h4{
        font-size: 25px;
    }
}

/*-----------------------------------
　仕様
------------------------------------*/
.specCont h3{
    margin-bottom: 30px;
    padding: 10px 0;
}
.specCont h4{
    margin: 20px 0;
    text-align: center;
}
.specCont h4 span{
    background-color: #5b1919;
    color: #fff;
    padding: 0 20px;
    font-size: 34px;
    line-height: 1.6em;
    text-align: center;
}

.specCont .inner{
    margin-bottom: 40px;
}
.specCont .inner img{
    margin-bottom: 15px;
}
.specCont .inner dl{
    margin-bottom: 30px;
}
.specCont .inner dl dt{
    color: #5b1919;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5em;
    border-bottom: 1px solid #5b1919;
}

@media screen and (max-width: 768px) {
    .specCont h4 span{
        font-size: 28px;
    }

    .specCont .inner{
        width: 95%;
        margin: 0 auto 40px;
    }
}
@media screen and (max-width: 480px) {
}



/*-----------------------------------
　サイズ
------------------------------------*/
/*.sizeCont .inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
        border: 1px solid red;
}*/

/*----*/
/*タブ切り替え全体のスタイル*/
.sizeCont .tabs {
    margin-top: 50px;
    padding-bottom: 40px;
    background-color: #fff;
    margin: 0 auto;
}

/*タブのスタイル*/
.sizeCont .tab_item {
    display: block;
    background-color: #d9d9d9;
    color: #fff;
    width: 24%;
    height: 50px;
    margin: 0 0.5%;
    font-size: 16px;
    font-weight: bold;
    line-height: 50px;
    text-align: center;
    float: left;
    transition: all 0.2s ease;
}
.sizeCont .tab_item:hover {
  opacity: 0.75;
}

.sizeCont label#school{
    background-color: #100785;
}
.sizeCont label#win{
    background-color: #533406;
}
.sizeCont label#fire{
    background-color: #cd1235;
}
.sizeCont label#club{
    background-color: #47900d;
}

/*ラジオボタンを全て消す*/
.sizeCont input[name="tab_item"] {
  display: none;
}


/*選択されているタブのコンテンツのみを表示*/
#school:checked ~ #school_content,
#win:checked ~ #win_content,
#fire:checked ~ #fire_content,
#club:checked ~ #club_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
    opacity: 0.5;
}

/*-------*/
.sizeCont .tab_content {
  display: none;
  padding: 40px 0 0;
  clear: both;
  overflow: hidden;
}
.sizeCont .tab_content h4{
    color: #484848;
    margin-bottom: 20px;
    font-size: 32px;
    line-height: 1.5em;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #333;
}
.sizeCont .tab_content h4 b{
    font-size: 52px;
}
.sizeCont .tab_content img{
    margin-bottom: 30px;
}

/**/
.sizeCont #school_content h4{
    border-bottom: 1px solid #100785;
}
.sizeCont #school_content h4 b{
    color: #100785;
}
/**/
.sizeCont #win_content h4{
    border-bottom: 1px solid #533406;
}
.sizeCont #win_content h4 b{
    color: #533406;
}
/**/
.sizeCont #fire_content h4{
    border-bottom: 1px solid #cd1235;
}
.sizeCont #fire_content h4 b{
    color: #cd1235;
}
/**/
.sizeCont #club_content h4{
    border-bottom: 1px solid #47900d;
}
.sizeCont #club_content h4 b{
    color: #47900d;
}

@media screen and (max-width: 768px) {
    /*.sizeCont .inner{
        width: 95%;
        margin: auto;
    }*/

    /*----*/
    /*タブ切り替え全体のスタイル*/
    .sizeCont .tabs {
        width: 100%;
    }

    /*タブのスタイル*/
    .sizeCont .tab_item {
        width: 24%;
        margin: 0 0.5%;
    }
    
    /*-------*/
    .sizeCont .tab_content {
        width: 95%;
        margin: auto;
    }
    .sizeCont .tab_content h4{
        font-size: 30px;
    }
    .sizeCont .tab_content h4 b{
        font-size: 42px;
    }

}
@media screen and (max-width: 480px) {
    /*タブのスタイル*/
    .sizeCont .tab_item {
        width: 49%;
        margin: 2px 0.5%;
    }
    
    /*-------*/
    .sizeCont .tab_content h4{
        font-size: 25px;
    }
    .sizeCont .tab_content h4 b{
        font-size: 32px;
    }
}


/*-----------------------------------
　生地
------------------------------------*/
.clothCont h3 + p{
    color: #7e0f0f;
    margin-bottom: 30px;
    font-size: 28px;
    text-align: center;
}

/**/
.clothCont ul.anchorLink{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 40px;
}
.clothCont ul.anchorLink li{
    width: 45%;
    text-align: center;
}
.clothCont ul.anchorLink li a{
    display: block;
    color: #fff;
    padding: 15px 10px;
    padding-right: 30px;
    font-size: 24px;
    line-height: 1.3em;
    position: relative;
}
.clothCont ul.anchorLink li a:after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top: 10px solid #fff;
    position: absolute;
    top: 5px;
    bottom: 0;
    right: 15px;
    margin: auto;
}
.clothCont ul.anchorLink li b{
    font-size: 36px;
    line-height: 1.3em;
}
.clothCont ul.anchorLink li.btn_high a{
    background-color: #1f3f8a;
    padding-left: 100px;
}
.clothCont ul.anchorLink li.btn_high a:before{
    content: "高級仕様";
    display: block;
    background-color: #3c5ca7;
    color: #e1d97f;
    max-width: 90px;
    padding: 20px 10px;
    font-size: 30px;
    line-height: 1.1em;
    letter-spacing: 0.1em;
    word-break: break-all;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}
.clothCont ul.anchorLink li.btn_print a{
    background-color: #245617;
}

/**/
.clothCont .inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 30px 0;
}
.clothCont .inner .leftBox{
    width: 370px;
}
.clothCont .inner .leftBox .hBox p{
    background-color: #2c2c2c;
    color: #fff;
    font-size: 22px;
    line-height: 1.5em;
    text-align: center;
}
.clothCont .inner .leftBox .hBox h4{
    padding: 10px;
    font-size: 20px;
    line-height: 1.2em;
    text-align: center;
}
.clothCont .inner .leftBox .hBox h4 b{
    font-size: 50px;
    line-height: 1.2em;
}

.clothCont .inner .clothList{
    width: 100%;
    margin: 30px auto 0;
}
.clothCont .inner .clothList h5{
    font-size: 25px;
    line-height: 1.5em;
    text-align: center;
    border-bottom: 1px solid #c7b664;
}
.clothCont .inner .clothList h5 + p{
    color: #e10000;
    margin-bottom: 20px;
    text-align: right;
}
.clothCont .inner .clothList ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.clothCont .inner .clothList ul li{
    width: 135px;
    margin-right: 16px;
    margin-bottom: 15px;
    text-align: center;
}
.clothCont .inner .clothList ul li:nth-of-type(6n){
    margin-right: 0;
}

@media screen and (max-width: 768px) {
    .clothCont h3 + p{
        font-size: 25px;
    }

    /**/
    .clothCont ul.anchorLink li{
        width: 45%;
    }
    .clothCont ul.anchorLink li a{
        padding: 10px 10px;
        padding-right: 30px;
        font-size: 20px;
    }
    .clothCont ul.anchorLink li b{
        font-size: 30px;
    }
    .clothCont ul.anchorLink li.btn_high a:before{
        max-width: 60px;
        padding: 15px 10px;
        font-size: 25px;
    }

    /**/
    .clothCont .inner{
        width: 95%;
        margin: 30px auto;
    }
    .clothCont .inner .rightImg{
        width: 53%;
    }
    .clothCont .inner .leftBox{
        width: 45%;
    }
    .clothCont .inner .leftBox .hBox p{
        font-size: 22px;
    }
    .clothCont .inner .leftBox .hBox h4{
        font-size: 20px;
    }
    .clothCont .inner .leftBox .hBox h4 b{
        font-size: 40px;
    }
    .clothCont .inner .clothList ul li{
        width: 19%;
        margin-right: 1%;
    }
    .clothCont .inner .clothList ul li:nth-of-type(6n){
        margin-right: 1%;
    }
    .clothCont .inner .clothList ul li:nth-of-type(5n){
        margin-right: 0;
    }
}
@media screen and (max-width: 480px) {
    .clothCont h3 + p{
        font-size: 20px;
        line-height: 1.5em;
    }

    /**/
    .clothCont ul.anchorLink li{
        width: 95%;
        margin-bottom: 5px;
    }
    .clothCont ul.anchorLink li a{
        padding: 5px 10px;
        padding-right: 30px;
        font-size: 18px;
    }
    .clothCont ul.anchorLink li b{
        font-size: 25px;
    }
    .clothCont ul.anchorLink li.btn_high a:before{
        max-width: 60px;
        padding: 10px 10px;
        font-size: 20px;
    }
    
    /**/
    .clothCont .inner .rightImg{
        width: 100%;
    }
    .clothCont .inner .leftBox{
        width: 100%;
        margin-bottom: 10px;
    }
    .clothCont .inner .leftBox .hBox p{
        font-size: 20px;
    }
    .clothCont .inner .leftBox .hBox h4 b{
        font-size: 35px;
    }
    .clothCont .inner .clothList ul li{
        width: 32%;
        margin-right: 1%;
    }
    .clothCont .inner .clothList ul li:nth-of-type(5n){
        margin-right: 1%;
    }
    .clothCont .inner .clothList ul li:nth-of-type(4n){
        margin-right: 1%;
    }
}

/*-----------------------------------
　フレンジ
------------------------------------*/
.frenzyCont .inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 30px;
}
.frenzyCont .inner dl{
    width: 400px;
}
.frenzyCont .inner dl dt{
    color: #5b1919;
    margin-bottom: 20px;
    font-size: 28px;
}
.frenzyCont .inner dl dd p{
    line-height: 2.0em;
}

.frenzyCont section h4{
    color: #333;
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.5em;
    text-align: center;
    border-bottom: 1px solid #e6ddb3;
}
.frenzyCont section h4 + p{
    margin-bottom: 20px;
    color: #e10000;
    text-align: right;
}

.frenzyCont section dl{
    margin-bottom: 30px;
}
.frenzyCont section dl dt{
    background-color: #e6ddb3;
    color: #1d1d1d;
    margin-bottom: 20px;
    font-size: 25px;
    font-weight: bold;
    line-height: 1.5em;
    text-align: center;
}
.frenzyCont section dl dd ul{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 20px;
}


@media screen and (max-width: 768px) {
    .frenzyCont .inner{
        width: 95%;
        margin: 30px auto;
    }
    .frenzyCont .inner dl{
        width: 50%;
    }
    .frenzyCont .inner > div{
        width: 48%;
    }

    .frenzyCont section dl{
        width: 95%;
        margin: 0 auto 30px;
    }
    .frenzyCont section dl dt{
        font-size: 22px;
    }
    .frenzyCont section dl dd ul li{
        width: 32.5%;
    }
}

@media screen and (max-width: 480px) {
    .frenzyCont .inner dl{
        width: 100%;
    }
    .frenzyCont .inner dl dt{
        font-size: 25px;
    }
    .frenzyCont .inner > div{
        width: 100%;
        margin-bottom: 15px;
    }
    
    .frenzyCont section h4{
        padding: 0 5px;
    }
    .frenzyCont section h4 + p{
        width: 95%;
        margin: 0 auto 20px;
    }
}

/*-----------------------------------
　デザイン
------------------------------------*/
.designCont .inner{
    margin-bottom: 30px;
}
.designCont .inner img{
    margin-bottom: 20px;
}

.designCont .inner dl.caution{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    background-color: #ff0000;
    margin: 30px 0;
    border: 1px solid #ff0000;
}
.designCont .inner dl.caution dt{
    width: 18%;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}
.designCont .inner dl.caution dd{
    width: 82%;
    background-color: #feffe7;
    padding: 15px 20px;
}

.designCont h4{
    font-size: 25px;
    font-weight: bold;
    line-height: 1.5em;
    border-bottom: 1px solid #c7b664;
}

@media screen and (max-width: 768px) {
    .designCont .inner,
    .designCont section{
        width: 95%;
        margin: 0 auto 30px;
    }
}
@media screen and (max-width: 480px) {
    .designCont .inner dl.caution{
        flex-wrap: wrap;
    }
    .designCont .inner dl.caution dt{
        width: 100%;
        font-size: 18px;
        line-height: 1.8em;
    }
    .designCont .inner dl.caution dd{
        width: 100%;
        padding: 2%;
    }

}


/*-----------------------------------
　付属品
------------------------------------*/
.optionCont .optionMain{
    text-align: center;
}
.optionCont .optionMain > img{
    margin-bottom: 20px;
}
.optionCont .optionMain > p{
    margin-bottom: 30px;
    text-align: left;
}

.optionCont .inner{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 30px;
}
.optionCont .inner > dl{
    width: 280px;
}
.optionCont .inner > dl dt{
    background-color: #2c2c2c;
    color: #fff;
    margin-bottom: 10px;
    padding: 3px 10px;
    font-size: 18px;
    line-height: 1.5em;
}
.optionCont .inner > dl dd img{
    margin-bottom: 10px;
}

.optionCont h4{
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.5em;
    border-bottom: 1px solid #c7b664;
}

.optionCont .inner > dl a.popupImg:after{
    top: 5px;
}


@media screen and (max-width: 768px) {
    .optionCont .optionMain{
        width: 95%;
        margin: auto;
    }
    
    .optionCont .inner{
        width: 95%;
        margin: 0 auto 30px;
    }
    .optionCont .inner > dl{
        width: 31%;
    }

    .optionCont h4{
        width: 95%;
        margin: 0 auto 20px;
    }
}
@media screen and (max-width: 550px) {
    .optionCont .inner{
        flex-wrap: wrap;
    }
    .optionCont .inner > dl{
        width: 48%;
        margin-bottom: 20px;
    }

    .optionCont h4{
        width: 95%;
        margin: 0 auto 20px;
    }
}
@media screen and (max-width: 480px) {
    .optionCont .inner > dl{
        width: 100%;
    }
    .optionCont .inner > dl dt{
        text-align: center;
    }
    .optionCont .inner > dl dt img{
        max-width: 280px;
    }
}


/*-----------------------------------
　納品までの流れ
------------------------------------*/
.flowCont h3 + p{
    margin-bottom: 30px;
}
.flowCont div.inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 100px;
    position: relative;
}
.flowCont div.inner:after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-top: 70px solid #ffa200;
    position: absolute;
    bottom: -125px;
    left: 200px;
}

.flowCont div.inner:nth-of-type(5){
    margin-bottom: 40px;
}
.flowCont div.inner:nth-of-type(5):after{
    display: none;
}

/**/
.flowCont div.inner dl{
    width: 340px;
}
.flowCont div.inner dl dt{
    color: #000;
    margin-bottom: 10px;
    padding: 5px 15px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5em;
    border-left: 4px solid #c7b664;
}

.flowCont div.inner dl dd .linkBtn{
    margin: 30px 0 0;
}
.flowCont div.inner dl dd .linkBtn a{
    display: block;
    color: #fff;
    padding: 15px 10px;
    padding-right: 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    position: relative;
}
.flowCont div.inner dl dd .linkBtn a:after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.flowCont div.inner dl dd .estimate a{
    background-color: #eb2626;
}
.flowCont div.inner dl dd .estimate a:after{
    border-top: 10px solid #fff;
    top: 5px;
}
.flowCont div.inner dl dd .template a{
    background-color: #00991d;
}
.flowCont div.inner dl dd .template a:after{
    border-left: 10px solid #fff;
}

/**/
.flowCont ul.linkList{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.flowCont ul.linkList li{
    width: 280px;
}
.flowCont ul.linkList li a{
    display: block;
    color: #fff;
    padding: 15px 10px;
    padding-right: 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    position: relative;
}
.flowCont ul.linkList li a:after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left: 10px solid #fff;
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
}

/**/
.flowCont ul.linkList li.postage a{
	background-color: #0760f3;
}
.flowCont ul.linkList li.pay a{
	background-color: #e50a0a;
}
.flowCont ul.linkList li.return a{
	background-color: #0e7f33;
}


@media screen and (max-width: 768px) {
    .flowCont h3 + p {
        width: 95%;
        margin: 30px auto;
    }
    .flowCont .inner {
        width: 95%;
        margin: 30px auto;
    }
    
    .flowCont div.inner:after{
        border: 30px solid transparent;
        border-top: 50px solid #ffc693;
        bottom: -100px;
        left: 0;
        right: 0;
        margin: auto;
    }
    .flowCont div.inner > div{
        width: 48%;
    }
    .flowCont div.inner dl{
        width: 50%;
    }
    
    /**/
    .flowCont ul.linkList{
        width: 95%;
        margin: auto;
    }
    .flowCont ul.linkList li{
        width: 30%;
    }
}
@media screen and (max-width: 480px) {
    .flowCont h3 + p{
        margin: auto;
    }
    
    .flowCont div.inner{
        margin-bottom: 80px;
    }
    .flowCont div.inner:after{
        border: 20px solid transparent;
        border-top: 40px solid #ffc693;
        bottom: -80px;
        left: 0;
        right: 0;
        margin: auto;
    }

    .flowCont div.inner > div{
        width: 100%;
        margin-bottom: 10px;
    }
    .flowCont div.inner dl{
        width: 100%;
    }
    
    /**/
    .flowCont ul.linkList li{
        width: 90%;
        margin: 5px auto;
    }
}



/*-----------------------------------
　よくある質問集
------------------------------------*/
.faqCont h3{
    background-color: #cccab6;
    color: #2a0f02;
    margin-bottom: 20px;
    font-size: 36px;
    text-align: center;
    line-height: 1.7em;
}

.faqCont h3 + p{
    margin-bottom: 30px;
}
.faqCont dl{
    margin-bottom: 40px;
}
.faqCont dl dt{
    background-color: #eeeeee;
    color: #c40033;
    margin-bottom: 15px;
    padding: 5px 5px 5px 60px;
    font-size: 18px;
    line-height: 1.7em;
    position: relative;
}
.faqCont dl dt:before{
    content: "Ｑ";
    display: block;
    background-color: #bdaa70;
    color: #fff;
    width: 40px;
    height: 40px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 2em;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.faqCont dl dd{
    padding-left: 60px;
    position: relative;
}
.faqCont dl dd:before{
    content: "Ａ";
    display: block;
    background-color: #c40033;
    color: #fff;
    width: 40px;
    height: 40px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 2em;
    position: absolute;
    left: 0;
    top: 0;
}

.faqCont dl dd p{
    font-size: 13px;
}
.faqCont dl dd p span{
    background-image: linear-gradient(to bottom, transparent 40%, #fffd56 40%);
}
/*開閉*/
.faqCont dl input{
	display: none;
}


@media screen and (max-width: 768px) {
    .faqCont {
        width: 95%;
        margin: 30px auto;
    }
    .faqCont h3{
        font-size: 30px;
    }

    .faqCont dl dt{
        padding: 5px 5px 5px 50px;
        font-size: 16px;
        line-height: 1.7em;
    }
    .faqCont dl dt:before{
        width: 30px;
        height: 30px;
        line-height: 1.5em;
        left: 5px;
    }
    
    .faqCont dl dd{
        padding-left: 50px;
    }
    .faqCont dl dd:before{
        width: 30px;
        height: 30px;
        line-height: 1.5em;
        left: 5px;
        top: 0;
        bottom: auto;
    }
}
@media screen and (max-width: 480px) {
    .faqCont h3{
        font-size: 25px;
        line-height: 1.3em;
    }
    .faqCont dl{
		margin-bottom: 20px;
	}
	/*開閉*/
	.faqCont dl input{
		display: none;
	}
	.faqCont input + label dt{
		padding-right: 25px;
		position: relative;
	}
	.faqCont input + label dt:after{
		content: "";
		display: block;
		width: 0;
		height: 0;
		border: 7px solid transparent;
		border-top: 12px solid #333;
		position: absolute;
		right: 8px;
		top: 5px;
		bottom: 0;
		margin: auto;
		transition: all 0.3s ease-out;
	}
	.faqCont dl dd{
		max-height: 0;
		overflow: hidden;
		transition: 0.5s;
	}
	.faqCont input:checked + label + dd{
		max-height: 400px;
	}
	.faqCont input:checked + label dt:after{
		border-top: none;
		border-bottom: 12px solid #333;
		top: 0;
	}
}



/*-----------------------------------
　見積りフォーム
------------------------------------*/
.estimateBox,
.customerBox{
	width: 890px;
    margin: 0 auto 50px;
}

.estimateBox h2,
.estimateBox h3{
	color: #591f00;
	margin-bottom: 20px;
	font-size: 44px;
	line-height: 1.5em;
	text-align: center;
	border-bottom: 1px solid #591f00;
}

.estimateBox h2 + p,
.estimateBox h3 + p{
	margin-bottom: 30px;
}



.estimateBox h4{
	background-color: #666;
	color: #fff;
	margin-bottom: 20px;
	font-size: 30px;
	line-height: 1.5em;
	text-align: center;
}



@media screen and (max-width: 768px) {
	.estimateBox,
	.customerBox{
		width: 95%;
	}
    .estimateBox h2,
	.estimateBox h3{
        font-size: 36px;
    }
    .estimateBox h4{
        font-size: 25px;
    }

    .estimateBox h2 + p,
    .estimateBox h3 + p{
		width: 100%;
	}

}
@media screen and (max-width: 480px) {
    .estimateBox h2,
    .estimateBox h3{
        font-size: 30px;
		line-height: 1.2em;
    }
    .estimateBox h4{
        font-size: 25px;
    }

}






/*-----休業期間-----*/
.news-closed{
	width: 80%;
	max-width: 700px;
	margin: 30px auto;
	padding: 3px;
	font-weight: 600;
	line-height: 2em;
	letter-spacing: 0.03em;
	border: 1px solid #e00000;
}
.news-closed a{
	display: block;
	background-color: #ffdada;
	padding-right: 20px;
	position: relative;
}
.news-closed a:after{
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-top: 2px solid #e00000;
	border-right: 2px solid #e00000;
	transform: rotate(45deg);
	position: absolute;
	right: 10px;
	top: 0;
	bottom: 0;
	margin: auto;
}
.news-closed a dl{
	display: flex;
	gap: 5px;
}
.news-closed a dl dt{
	background-color: #191919;
	color: #fff;
	padding: 5px 10px;
	font-size: 15px;
}
.news-closed a dl dd{
	padding: 5px 10px;
	font-size: 17px;
}

/**/
.news-closed a:hover{
	background-color: #ffb238;
}


@media screen and (max-width: 768px) {
	.news-closed{
		width: 90%;
	}
	.news-closed a dl dt{
		display: flex;
		align-items: center;
		width: 130px;
	}
	.news-closed a dl dd{
		font-size: 16px;
	}
}
@media screen and (max-width: 480px) {
	.news-closed a dl dd{
		font-size: 15px;
	}
}