@charset "UTF-8";
*{
margin: 0;
padding: 0;
}
footer, header, nav, main, section, aside{ 
display:block;
}
html{
box-sizing: inherit;
font-size: 16px;
line-height: 24px;
}
body{
box-sizing: border-box;
color: #3a4147;
font-family: Myriad, "Avenir Next", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif;
font-size: 0.95rem;
line-height: 1.2rem;
letter-spacing: 0.03em;
-webkit-text-size-adjust: 100%; /* iosで横にしてもフォントサイズを変えない */
}
button{
font-family: Myriad, "Avenir Next", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif;
}
img{
border: none;	
}
label{
cursor: pointer;	
}
dl, ol, ul{
list-style: none;
}
dl{
margin-bottom: 2.0em;	
line-height: 1.8em;
}
dt{
font-weight: bold;
margin-bottom: 0.3em;
padding: 0.3em;
}
dd{
margin-left: .5em;
}
.circleitem{
display: list-item;
list-style: circle outside;
}
.iblock{
display: inline-block;
margin-right: 10px;
margin-left: 10px;
}
.button, button, dt{
margin-bottom: 1.0em;
}
ol, p, ul{
margin-bottom: 1.0rem;
line-height: 1.8em;
}
b{
font-weight: bold;
font-size: 1.125rem;
}
h1, h2, h3{
font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
/*font-weight: 500; 細くしたいとき*/
letter-spacing: 0.05em;
}
h2{
font-size: 1.25rem;
line-height: 2.0rem;
padding: 10px;
background: #f4f2f0;
border-bottom: 3px double #8D4D64;
text-align: center;	
margin-bottom: 1.2em;	
text-shadow: -1px 1px 0 rgba(255,255,255,1);
}
h3{
font-size: 1.125rem;
line-height: 1.8rem;
border-bottom:  2px solid #D7DCEC;
margin-bottom: 1.0rem;
padding-left: 0.5em;
padding-right: 0.5em;
}

/* 構造 */
body{
display: flex;
min-height: 100vh;
height: 100%;
flex-direction: column;
align-items: center;
overflow-x: hidden;
}
main{
flex: 1 0 auto;
padding-top: 2.0rem;
padding-bottom: 10.0rem;
max-width: 1280px;
margin: 0px auto;
}
header, footer, main{
width: 100%;
}
.container{
margin: 0 auto;
position: relative;
width: 90%;
}
.width{
max-width: 1280px;
margin: 0px auto;
}
/* colors
濃い色　#162E5B
薄い青　#F4F6FA
薄い色　#f4f2f0
差し色　#8D4D64

文字色　#3a4147
薄い文字色　#c9bfb5
*/
a{
text-decoration: none;
color: #3a4147;
padding: 0.4em;
background: #f4f2f0;
}
a:focus, a:hover{
color: #606c76;
opacity: 0.8;
transition: 0.3s;
}
main{
background: #FFF;
}
#menubar, .bottomnav, .tab{
background: #f4f2f0;
}
dt{
background:rgba(0, 0, 0, 0) linear-gradient(transparent 90%, #f4f2f0 0%) repeat scroll 0 0;	
}
footer{
background: #162E5B;
}
.linkwhite, .linkwhite:visited{
color: #FFF;
background: none;
}
.contactbanner{
background: #162E5B;
}
h1#pagetop{
color: #162E5B;
}
strong{
color: #c85179;
font-weight: normal;
}
.blue{
color: #162E5B;
}
/* icon */
.icon{
padding-left: 1.2em;;
}
/* 
.email{
background: url('../icon/email-solid.svg') no-repeat center left;
padding-left: 23px;
z-index: 1;
}
 */
.contact{
background: url('../icon/chat-bubble-solid.gif') no-repeat center left;
background-size: 18px 18px;
padding-left: 23px;
z-index: 1;
}
.credit{
background: url('../icon/credit-card-line.png') no-repeat center left;
background-size: 16px 16px;
}
.shipping{
background: url('../icon/truck-line.png') no-repeat center left;
background-size: 16px 16px;
}
.time{
background: url('../icon/clock-line.png') no-repeat center left;
background-size: 16px 16px;
}
.footcontact{
background: url('../icon/chat-bubble.png') no-repeat center left;
background-size: 18px 18px;
padding-left: 23px;
}
.menuicon{
background: url('../icon/bars-line.svg') no-repeat center left;
background-size: 16px 16px;
}
.excel{
background: url('../icon/excel.png') no-repeat center left;
background-size: 1.0em 1.0em;
}
.yuubin{
background: url('../icon/yuubin.gif') no-repeat center left;
background-size: 1.0em 1.0em;
}
.livechat{
background: url('../icon/livechat.png') no-repeat center left;
background-size: 1.4em 1.4em;
}
.link:before{
content: '';
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
background-size: contain;
margin-right: 0.2rem;
background-image: url('../icon/circle-arrow-line.gif');
}
.link{
display: inline-block;
margin-bottom: 5px;	
}
li.futatsu{
background: no-repeat bottom left url("../img/icon25_futatsu.gif");
padding-left: 30px;
padding-top: 10px;
}
li.card{
background: no-repeat bottom left url("../img/icon25_card.gif");
padding-left: 30px;
padding-top: 10px;
}
li.ofuku{
background: no-repeat bottom left url("../img/icon25_ofuku.gif");
padding-left: 28px;
padding-top: 10px;
}
li.hagaki{
background: no-repeat bottom left url("../img/icon25_hagaki.gif");
padding-left: 28px;
padding-top: 10px;
}
.price:before{
content: '';
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
background-size: contain;
margin-right: 0.2rem;
background-image: url('../icon/tags-solid.png');
}
.detail:before{
content: '';
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
background-size: contain;
margin-right: 0.2rem;
background-image: url('../icon/file-group-line.png');
}
.apply:before{
content: '';
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
background-size: contain;
margin-right: 0.2rem;
background-image: url('../icon/pencil-line.gif');
}
.freeoption:before{
content: '';
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
background-size: contain;
margin-right: 0.2rem;
background-image: url('../icon/piggy-bank-line.png');
}
.plusoption:before{
content: '';
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
background-size: contain;
margin-right: 0.2rem;
background-image: url('../icon/plus-circle-line.png');
}
.linecontact:before{
content: '';
display: inline-block;
width: 18px;
height: 16px;
vertical-align: middle;
background-size: contain;
margin-right: 0.2rem;
background-image: url('../icon/line.png');
}
.notice:before{
content: '※';
}
.selecttype:before{
content: '▽';
}
/* パンくず */
nav#bread{
width: 100%;
text-align: left;
}
li.breaditems{
list-styletype: none;
display: inline-block;
}
li.breaditems:first-child{
background: url('../icon/home-solid.gif') no-repeat center left;
background-size: 16px 16px;
}
li.breaditems:after{
content: " > ";	
opacity: 0.5;
}
li.breaditems:last-child:after{
content: "";
}
li.breaditems a{
background: none;
}

/* ヘッダー */
h1#pagetop{
font-size: 0.7rem;
text-align: right;
opacity: 0.6;
margin-bottom: 5px;
font-weight:normal;
}
div.flextop{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-bottom: 5px;
}
.contactbanner{
width: 200px;
height: 50px;
color: #FFF;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 1px;
margin-top: 10px;
margin-bottom: 10px;
}
.contactbanner:before{
border: 1px solid #fff;
content: '';
display: block;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 4px;
border-radius: 1px;
}
#mainlogo{
flex: 1 0 auto;
}
#linklogo{
background: none;	
}
.flextop ul, .contactbanner{
flex: 0 0 200px;
}
.flextop li{
padding-left: 20px;
}
.flextop li a{
padding-left: 0;
}
.flextop li,
.flextop li a,
.flextop li a:visited{
color: #8D4D64;
background-color: transparent;
}
/* 全体 */
hr{
border: 0;
border-top: 0.1rem solid #f4f5f6;
margin: 2.0rem 0;
}
.small{
font-size: 0.8rem;
line-height: 1.6em;
}
.light{
opacity: 0.7;
}
.txtcenter{
text-align: center;
}
main img{
display: block;
margin: auto;
}
/*上へ戻る*/
#gototop{
display: none;
position: fixed;
bottom: 50px;
right: 15px;
}
#gototop a{
display: block;
background-color: #ccc;
text-align: center;
text-decoration: none;
width: 30px;
height: 30px;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
#gototop a:hover{
display: block;
background-color: #b2d1fb;
text-align: center;
width: 30px;
height: 30px;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
/*3カラムカード*/
.gridcontainer{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 2.0em;
margin: 0 0 2em;
}
.griditems{
text-align: center;
min-width: 0;
}
/* IE10-11 */
_:-ms-input-placeholder, :root .gridcontainer:after{
content: '';
display: block;
width: 100%;
clear: both;
}
_:-ms-input-placeholder, :root .griditems{
float: left;
margin-right: 30px;
}
.griditems p,
.griditems ul{
text-align: left;
max-width: 300px;
margin-right: auto;
margin-left: auto;
}
/*デザインリスト*/
ul.thumb{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-auto-rows: 1fr;
grid-gap: 0.8em;
}
ul.thumb li{
text-align: center;
min-width: 0;
}
/* IE10-11 */
_:-ms-input-placeholder, :root ul.thumb li{
display: inline-block;
margin-right: 20px;
margin-bottom: 20px;
}
.thumb li img{
display: block;
object-fit: cover;
}
.thumb li a{
background: none;
padding: 0;
}
/*上ナビ*/
ul#gnav{
padding: 0;
margin: 0;
transition: max-height 0.5s;
display: flex;
justify-content: space-between;
}
ul#gnav li{
text-align: center;
flex: 1 1 auto;
width: calc(100%/8);
border-right: 1px solid #FFF;
}
ul#gnav li:first-child{
border-left: 1px solid #FFF;
}
ul#gnav li a{
text-decoration: none;
color: inherit;
display: block;
width: 100%;
height: 45px;
padding: 0px;
padding-top: 15px;
}
ul#gnav li a:hover{
background-color: #edeae6;
transition: 0.3s;
}
ul#gnav .active{
font-weight: bold;
}
.menu-icon{
display: none;
}
/* フッター */
.bottomnav img{
display: block;
margin-bottom: 10px;	
}
.bottomnav{
padding-top: 30px;
padding-bottom: 30px;
line-height: 1.5rem;
margin-bottom: 20px;	
}
.flexbottom{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flexbottom .column{
flex: 0 1 auto;
margin-left: 20px;
margin-right: 20px;
min-width: 300px;
}
.bottomnav .circle{
list-style: circle inside;
line-height: 2.0em;
}
.footnav{
padding-top: 10px;	
padding-bottom: 10px;	
line-height: 1.5rem;
}
/* howto */
.howto h3:before{
content: '';
display: inline-block;
width: 40px;
height: 40px;
vertical-align: middle;
background-size: contain;
margin-right: 0.5rem;
}
.howto div.row:first-of-type h3:before{
background-image: url('../img/steps01.png');
}
.howto div.row:nth-of-type(2) h3:before{
background-image: url('../img/steps02.png');
}
.howto div.row:nth-of-type(3) h3:before{
background-image: url('../img/steps03.png');
}
.howto div.row:nth-of-type(4) h3:before{
background-image: url('../img/steps04.png');
}
.howto hr{
height: 50px;
background: url(../img/flow.png) no-repeat top center;
background-size: 50px 50px;
border: 0px;
margin: 0px;
}
.row{
display: flex;	
flex-wrap: wrap;
margin-bottom: 1.0rem;
}
.imgbox{
flex: 0 0 150px;
margin-right: 10px;
margin-left: 10px;
}
.imgbox200{
flex: 0 0 200px;
margin-right: 20px;
margin-left: 20px;
margin-bottom: 20px;
}
.rowbetween{
justify-content: space-between;	
}
.rowcenter{
justify-content: center;	
}
.txtbox{
flex: 1;
}
.border{
border: 1px solid #CCC;
}
/* お知らせ */
#newslist time{
display: block;
text-align: right;
}
#newslist li{
border-bottom: 1px dashed #CCC;
margin-bottom: 2.0em;
}
/* 画像切り替え */
.gallery{
margin-left: 1.5em;	
}
.gallery img{
margin-bottom: 1.0em;
cursor: pointer;
width: 100px;
height: 100px;
object-fit: cover;	
object-position: 100% 0;
}
.galwrap{
width: 600px;
}
.Mainphoto{
height: auto;
max-height: 447px;
box-shadow: 2px 2px 4px #CCC;
margin-bottom: 0.5em;
}
/* タブ切り替え */
#pageindex{
margin-bottom: 2.0em;
}
.tab{
display: block;
min-width: 140px;
height: 40px;
line-height: 40px;
text-align: center;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 10px;
cursor: pointer;
transition: 0.3s;
}
.tab a, .type{
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 100%;	
}
.tab:hover{
opacity: 0.8;
}
.tabpanel{
display: flex;
flex-direction: column;
}
.tabcontent{
padding-bottom: 1.0rem;
margin-bottom: 8.0rem;
border-bottom: 0.1rem solid #f4f5f6;
}
.selected{
font-weight: bold;
}
.current{
order: -1;
animation: fadeIn 1s ease 0s 1 normal;
-webkit-animation: fadeIn 1s ease 0s 1 normal;
}
button{
width: 200px;
cursor: pointer;
padding: 0.5em;
font-size: 1.0rem;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@media (max-width: 1000px){
ul#gnav{
display: block;
max-height: 0px;
overflow: hidden;
}
ul#gnav.showing{
max-height: 600px;
}
ul#gnav li{
box-sizing: border-box;
margin: 0 auto;
text-align: left;
border: none;
border-top: 1px solid #e6e1dc;
width: 100%;
}
ul#gnav li a{
padding-left: 15px;
}
ul#gnav li a:before{
content:"□";	
}
.menu-icon{
width: 100%;
text-align: center;
box-sizing: border-box;
padding: 15px 10px;
cursor: pointer;
display: block;
}
main{
max-width: 95%;	
}
img{
max-width: 100%;
}
.bottomnav .width{
width: 80%;
margin-left: auto;
margin-right: auto;
}
.gallery{
flex-grow: 1;	
margin-left: 0;
}
.gallery img{
display: inline-block;
}
}
@media (max-width: 500px){
div.flextop{
justify-content: center;
}
#mainlogo{
flex: 0 0 200px;
padding-bottom: 10px;
}
.row{
justify-content: center;	
}
.mobileblock{
display: block;	
}
.imgbox200, .txtbox{
flex-basis: 100%;
margin-bottom: 1.0rem;
}
.Mainphoto{
max-height: 67vw;	
}
.gallery img{
width: 80px;
height: 80px;
}
button{
display: block;
margin-left: auto;
margin-right: auto;	
}
}