@charset "UTF-8";

/* 
    Created on : 2016/05/19, 16:37:54
    Author     : unimark201403b
*/
  
 /********************************************
                青コンテナ
********************************************/
.container_box1{
    background: #DDEAF2;
    padding: 50px;
}

.container_box1 .contents_box{
    width: 100%;
}

.order_flex_box{
    display: flex;
}

.order_flex_box .order_flex1, .order_flex_box .order_flex2{
    display: block;
}

.order_flex_img{
    border: 1px solid #E8E8E8;
    display: block;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}


 /********************************************
                青コンテナ
********************************************/

 /********************************************
                タイトル
********************************************/
#title {
position: relative;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
#title:before {
position: absolute;
top: 0;
left: 0;
z-index: 0;
content: "";
display: block;
width: 100%;
height: 100%;
background: rgba(40,85,170,0.40);
}
#title .inner {
position: relative;
z-index: 1;
padding: 40px 0;
}
.align-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#title .inner h2{
font-size: 37px;
}
#title .inner h2, #title .inner p {
font-weight: bold;
color: #FFF;
  text-align: center;
line-height: 1.4;
letter-spacing: 0.06em;
margin: 6px 12px;
text-shadow: 0px 0px 2px steelblue;
}
#title .inner h2.title_3g {
line-height: 1.2;
}

#title .inner h2 span.title_mi {
    font-size: 23px;
line-height: 1.2;
}

 /********************************************
                タイトル
********************************************/
 /********************************************
                センターボックス
********************************************/
.center_box{
 margin-top: 30px;
}
.center_box p, .center_box h3, .center_box h4{
 text-align: center;
}
.center_box h3{
 font-weight: bold;
 margin-top: 50px;
 color: #222;
}
 /********************************************
                センターボックス
********************************************/


.note_copy{
    margin: 0 auto;
}
.note_copy a img{
    display: block;
    margin: 0 auto;
    width: 710px;
}


.dw_box_a_1 div{
    margin-top:0px;
}
.dw_box div{
    margin: 10px auto;
    width: 90%;
}
.dw_box div div{
    margin: 10px auto;
    width: 100%;
}
.dw_box div h4{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}
.dw_box div ul li p.click_button{
    width: 100%;
	padding: 0;
    position: relative;
    box-shadow: none;
}
.dw_box_a div ul li p.click_button{
    width: 100%;
    position: relative;
    box-shadow: none;
}

.dw_box1{
    border-bottom: 1px solid #c89119;
    border-top: 1px solid #c89119;
}
.dw_box1 div h4{
    color: #452d16;
}
.dw_box1 div ul li p.click_button{
    background: #d6895c;
    border: 1px solid #754c24;
}
.dw_box_a div ul li p.click_button a{
    font-size: 14px;
    padding: 10px 3px;
}

.dw_box1 div ul li p a{
    color: #fff;
}

.dw_box2_1{
    border-right: 1px solid #ccc;
}
.dw_box2_2{
    border-left: 1px solid #ccc;
}
.dw_box2 div h4{
    color: #333;
}
.dw_box_a_1 div h4{
    font-size: 16px;
    border-bottom: 1px dotted #B9B9B9;
    margin-bottom: 10px;
    margin-top: 15px;
}
.dw_box2 div ul li p.click_button, .dw_box_a_1 div ul li p.click_button{
    background: #ccc;
    border: 1px solid #aaa;
}
.dw_box2 div ul li p a, .dw_box_a_1 div ul li p.click_button a{
    color: #333;
}

.dw_box_a a:after {
	position: absolute;
	border: inset 5px;
	content: "";
	display: block;
	height: 0;
	width: 0;
	border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
	border-top-style: solid;
	margin-top: -2.5px;
	top: 1.4rem;
    left: 0.2rem;
}

.contents_box{
    width: 100%;
    margin: 0 auto;
    margin-top: 20px;
    padding: 20px;
}

.contents_box h4{
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    border: 0px;
}

.contents_box p.note{
    text-align: left;
    margin-bottom: 8px;
}

.contents_box a img{
    margin-top: 10px;
}

.contents_box div.contents_box{
    padding: 20px;
}
.contents_box_mt{
    padding: 30px;
    background: #fff;
    border: 1px solid #e8e8e8;
}

#none_box{
    margin: 0 auto;
    margin-top: 50px;
}
#none_box div{
    width: 90%;
    margin: 0 auto;
}

#none_box a img{
    border: 1px solid #ddd;
    width: 90%;
    margin: 30px auto;
    padding: 30px;
}
.cg_table{
    width: 100%;
}
.cg_table td{
    background: #fff;
    padding:10px;
    border: 1px solid #ccc;
}
.fax_yuso{
    width: 80%;
    min-width: 300px;
    margin: 0 auto;
    margin-top: 50px;
}
.fax_yuso td{
    padding:10px;
    border: 1px solid #ccc;
    background: #fff;
}
.fax_yuso td.sp_sidehead{
    background: #eee;
}
.fax_yuso p{
    margin: 0;
}
         
 /********************************************/
 /******* 当店PRページ　ファクトリーボックス *******/
 /********************************************/    

.factory_min_tit{
    font-size: 24px;
    margin-top: 0;
    font-weight: bold;
    color: #333;
}

.factory_box{
    display: flex;
    border: 1px solid #eee;
    flex-wrap:wrap;
    max-width: 800px;
    margin: 0 auto;
}
.factory_box div{
    position: relative;
    padding: 20px;
    border: 1px solid #eee;
    width:calc(100% / 3);
}
.factory_box div h3{
    color: #333;
    font-size: 18px;
    text-align: left;
    margin-top: 0;
    padding: 8px 0 8px 35px;
    background: url(../org_images/guide/point_ic.png) no-repeat 3px center;
}

.factory_box div p{
    text-align: left;
    float: left;
    width: 80%;
}
.factory_box div img{
    border: 0;
    width: 20%;
    position: absolute;
    right: 10px;
    bottom: 10px;
}

 /********************************************/
 /******* 当店PRページ　ファクトリーボックス *******/
 /********************************************/   

 /********************************************/
 /******* ご利用ガイドページ　ガイドボックス *******/
 /********************************************/
 ul li.guide_box{
     list-style: none;
     height: 280px;
 }
 ul li.guide_box a{
     position: relative;
     display: block;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     border: solid 1px #eee;
     padding-bottom: 5px;
     border-radius: 0;
     padding: 30px;
 }
 ul li.guide_box a.guide_blue{
     border: 4px double  #4692D3;
 }
 .guide_box a img{
     display: block;
     margin: 0 auto;
     max-width: 80px;
 }
 .guide_box a h4.m_tit{
     font-size: clamp(0.85em, 1.4vw, 1.1em);
     border: 0;
     font-weight: bold;
     text-align: center;
 }
 .guide_box a.guide_blue h4.m_tit{
     color: #345975;
 }
 .guide_box a:hover{
     opacity: 1;
 }
 .guide_box p.m_ch{
     color: #333;
     margin-bottom: 5px;
     text-align: center;
    font-size: 14px;
 }
 .guide_box a:before{
    position: absolute;
    bottom: 30px;
    font-size: 14px;
    line-height: 30px;
    margin: 0 0 0 -78px;
    width: 155px;
    border: 1px solid darkgreen;
    color: darkgreen;
    content: '詳しくはこちら';
    display: block;
    left: 50%;
    text-align: center;
     transition: 0.2s;
 }
 .guide_box a:hover::before{
     background: darkgreen;
     color: #fff;
     transition: 0.2s;
 }
 .guide_box a.guide_blue:before{
    border: 1px solid #345975;
    color: #345975;
 }
 .guide_box a.guide_blue:hover::before{
     background: #345975;
    color: #fff;
 }





.container_box1 ul li.prp_box{
    position: relative;
    padding-left:10px;
    padding-top:20px;
    padding-right:5px;
    padding-bottom:0;
     height: 380px;
 }
 ul li.prp_box div.prp_div{
     position: relative;
     display: block;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     padding: 20px;
     background: #fff;
 }
 ul li.prp_box h5.prp_h5{
    position: absolute;
     font-size: 60px;
     color: #E3C13E;
    font-weight: bold;
     top:-10px;
     left: -5px;
 }
.guide_box div img.prp_img{
    width: 80%;
     max-width: 140px;
    margin: 0 auto;
    display: block;
 }
h4.prp_h4{
     color: #42808E;
    font-size: 20px;
    font-weight: bold;
    margin: 3px auto 15px auto;
 }

 .guide_box div p.prp_p{
    text-align: left;
 }
 /********************************************/
 /******* ご利用ガイドページ　ガイドボックス *******/
 /********************************************/

 /********************************************/
 /******* ご注文から納品まで *******/
 /********************************************/
div.pho_pd div.order_nhm_box{
    padding: 20px;
    border: 1px solid #ccc;
    margin: 0 auto 20px auto;
}
.order_nhm_box h3.m_tit{
    margin: 0 0 10px 0;
    text-align: left;
    font-size: 25px;
    color: #42808E;
}
.order_nhm_box img{
    display: block;
    margin: 0 auto;
    width:100%; 
    max-width:200px; 
}
.click_button a img {
    width: 10px;
}
.order_nhm_box h3.m_tit span.odr_tit_number{
    font-size: 30px;
    padding: 3px;
    background: #6DB93E;
    border-radius: 5px;
    color: #fff;
}
.order_nhm_box p{
    text-align: left;
    margin-bottom: 0;
}

div.pho_pd{
    margin-top: 60px;
}
.order_nhm_container{
    margin-top: 60px;
}


 /********************************************/
 /******* ご注文から納品まで *******/
 /********************************************/

 /********************************************/
 /******* PRボックス　タイトル *******/
 /********************************************/

 h3.pr_tit1{
     margin: 0px auto 20px auto;
     font-size: 30px;
     color: #395A61;
 }
 .pr_tit1 .pr_tit1_1{
     font-size: 23px;
 }

 .pr_tit1 .pr_tit1_2{
     margin-bottom: -30px;
     border-bottom: 2px solid #395A61;
     padding-bottom: 5px;
 }
 h4.pr_tit2{
     font-size: 30px;
     margin:15px auto;
 }
 .pr_tit2 .pr_tit2_1{
     font-size: 60px;
     color:#E3C13E;
 }
 .pr_tit2 .pr_tit2_2{
     vertical-align: text-top;
     color:#42808E;
 }
 /********************************************/
 /******* PRボックス　タイトル *******/
 /********************************************/
.l_s_tit{
    color: #333;
    background: #F2F2F2;
    border-left: 5px solid #0F80C2;
}
.l_num_tit{
    color: #333;
    background: #F2F2F2;
    border:0;
}
.l_num_tit .l_num{
    font-size: 18px;
    padding: 5px;
    color: #fff;
    background: #0F80C2;
    border-radius: 20px;
}



@media screen and (max-width: 769px){
     
 /********************************************/
 /******* ご利用ガイドページ　ガイドボックス *******/
 /********************************************/
 ul li.guide_box{
     height: 300px;
 }
 ul li.guide_box a{
     padding: 20px;
 }
 ul li.prp_box h5.prp_h5{
     left: 10px;
 }
 /********************************************/
 /******* ご利用ガイドページ　ガイドボックス *******/
 /********************************************/
      
 /********************************************/
 /******* 当店PRページ　ファクトリーボックス *******/
 /********************************************/    

.factory_box div{
    padding: 10px;
    width:calc(100% / 2);
}
 /********************************************/
 /******* 当店PRページ　ファクトリーボックス *******/
 /********************************************/   

}
    
@media screen and (max-width: 649px){
.column, .columns {
    padding: 0;
}
.row {
    padding: 0;
}
header div.medium-collapse div{
        padding: 5px;
    }
#footer2 div{
    padding: 5px;
}
.pho_pd{
    padding: 10px;
    }
  
.container_box1{
    padding: 10px;
}
 
    
.order_flex_box{
    flex-direction: column;
}
.order_flex_box .order_flex1{
    order: 1;
}
.order_flex_box .order_flex2{
    order: 2;
}
.order_flex_box .order_flex3{
    order: 3;
}
.order_flex_img{
    max-width: 200px;
}



    
#title .inner h2{
font-size: 24px;
}
#title .inner h2 span.title_mi {
    font-size: 18px;
}
    
    
.dw_box2_1{
    border: 0;
}
.dw_box2_2{
    border: 0;
}
   
.contents_box div.contents_box{
    padding: 10px;
}
.contents_box h4{
    font-size: 16px;
}
 
.contents_box_mt{
    width: 95%;
    padding: 10px;
}
    
 /********************************************/
 /******* ご利用ガイドページ　ガイドボックス *******/
 /********************************************/
 ul li.guide_box{
     height: 260px;
 }
     ul li.guide_box a {
         padding: 10px;
     }
 ul li.prp_box h5.prp_h5{
     top:-20px;
 }
 .guide_box a h4.m_tit{
     font-size: 14px;
     border: 0;
     font-weight: bold;
     text-align: center;
 }
 .guide_box a img{
     width: 50%;
 }
 .guide_box a:before{
    font-size: 12px;
    line-height: 23px;
    margin: 0 0 0 -55px;
    width: 110px;
 }
    
     
.container_box1 ul li.prp_box{
    padding: 10px 25px;
 }
 /********************************************/
 /******* ご利用ガイドページ　ガイドボックス *******/
 /********************************************/

 /********************************************/
 /******* PRボックス　タイトル *******/
 /********************************************/

 h3.pr_tit1{
     margin: 20px auto 0px auto;
     font-size: 24px;
     color: #395A61;
 }
 .pr_tit1 .pr_tit1_1{
     font-size: 16px;
 }

 .pr_tit1 .pr_tit1_2{
     border-bottom: 2px solid #395A61;
 }
 /********************************************/
 /******* PRボックス　タイトル *******/
 /********************************************/

 /********************************************/
 /******* ご注文から納品まで *******/
 /********************************************/
  
div.pho_pd{
    margin-top: 20px;
}
.order_nhm_box h3.m_tit{
    margin: 0 0 10px 0;
    font-size: 20px;
}
.order_nhm_box h3.m_tit span.odr_tit_number{
    font-size: 24px;
}

.order_nhm_container{
    margin-top: 20px;
}


 /********************************************/
 /******* ご注文から納品まで *******/
 /********************************************/

 /********************************************/
 /******* 当店PRページ　ファクトリーボックス *******/
 /********************************************/    

.factory_min_tit{
    font-size: 18px;
    }
.factory_box div h3{
    font-size: 16px;
}
 /********************************************/
 /******* 当店PRページ　ファクトリーボックス *******/
 /********************************************/   

}