@charset "utf-8";
body{
    background-color: #fff;
}
/* ヘッダー */
.he_top{
    background-image: url(../image/toi.jpg);
}
/* トップ キャッチコピーエリア */
.conA{
    left: 25%;
}
.sub-catch-copy{
    font-size: 0.9rem;
    letter-spacing: .1rem;
}
.catch-copy{
    line-height: 2rem;
}

/* 箇条書きリスト */
/* 0326仮 */
.toiawase{
    width: 100%;
    max-width: 1000px;
    /* width: 70vw; */
    margin: 0 auto;
    padding: 8% 4% 2% 4%;
}
.toiawase h2{
    letter-spacing: 0.5rem;
    color: rgb(64, 34, 15);
}
.toiawase p{
    margin: 5% 0;
}
.toiawase-grid-cha{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 6rem 1rem;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 50px;
    grid-row-gap: 50px;
}
.toiawase-grid-cha p{
    text-align: center;
}
.toiawase-grid-cha p a{
    padding: 30px 0;
    color: rgba(64, 34, 15, 1);
    background-color: rgb(255, 255, 255);
    border: 3px double rgba(64, 34, 15, 0.8);
    font-weight: bold;
    font-size: 1.2rem;
}
.toiawase-grid-cha p a:hover{
    color: rgb(255, 255, 255);  
    transition: 0.8s ;
    background-color: rgba(64, 34, 15, 0.8);
}
/* オンラインフォーム */
.form-con{
    max-width: 1300px;
    margin: 3% auto 5% auto;
    color: rgb(64, 34, 15);
}
.form-item{
    display: grid;
    grid-template-columns: 25% 1fr;
    grid-column-gap: 40px;
    margin: 20px auto;
    align-items: center;
}
.form-item p{
    text-align: right;
}
.form-item > P , .form-item02 > P ,.form-item03 > P{
    font-weight: bold;
    font-size: 1.05em;
}
.form-item iframe{
    width: 100%;
    max-width: 800px;
    height: 600px;
}
.iframe{
    width:100%;
}
.calendar{
    margin: 3% 0;
    text-align: left !important;
}
.form-item-input{
    margin-left: 0;
    height: 40px;
    flex: inherit;
    font-size: 15px;
    width: 250px;
    border: solid 1px rgb(64, 34, 15);
    margin-right: 20px;
    padding-left: 10px;
    border-radius: 5px;  
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: rgba(64, 34, 15, 0.7);
  }
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(64, 34, 15, 0.7);
  }
  ::placeholder{ /* Others */
    color: rgba(64, 34, 15, 0.7);
  }
  .form-item-input02{
    margin-left: 0;
    height: 40px;
    flex: inherit;
    font-size: 15px;
    width: 520px;
    border: solid 1px rgb(64, 34, 15);
    margin-right: 20px;
    padding-left: 10px;
    border-radius: 5px;  
}
/* ↓↓↓　セレクトタグの右側の矢印復活　リセットCSSで消えている */

    /* IE,Edge以外のたいていのブラウザ */
    select {
        -moz-appearance: menulist;
        -webkit-appearance: menulist;
    }
    /* IE,Edge　::-ms-expandはMS独自の擬似要素 */
    select::-ms-expand {
        display: block;
    }

/* ↑↑↑　セレクトタグの右側の矢印復活　リセットCSSで消えている */
select{
    color: rgb(64, 34, 15);
    border: solid 1px rgb(64, 34, 15);
    padding: 5px;
    border-radius: 5px;
}
.seal-quantity{
    width: 150px;
}
.use-zoom p{
    text-align: left !important;
}
#comment{
    width: 100%;
    max-width: 700px;
    height: 300px;
    border: solid 1px rgb(64, 34, 15);
    border-radius: 5px;
}
.btn-k-area{
    text-align: center;
    width: 100%;
    max-width: 1000px;
    margin: 0;
}
input[type="submit"]{
    background: #cc0d1d;
    border: none;
    color: white;
    font-size:17px;
    padding: 10px 20px;
    letter-spacing: 0.3rem;
    margin: 0 5px;
    border-radius: 5px;
    width: 350px;
    margin-left: 80px;
}
.credit{
    display: grid;
    /* width: 600px !important; */
    grid-template-columns: repeat(6,1fr);
    grid-column-gap: 15px;
    margin-top:15px  !important;
    margin-left: 0 !important;
    margin-bottom:15px  !important;
    padding-left: 20px;
}
.credit img{
    width: 100%;
}
.payment img{
    width: 100%;
}
.other{
    margin: 5% 0;
}
.other-area{
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 4%;
}
.other-area02{
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 4% 0% 4%;
}
.payment{
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-column-gap: 8%;
    margin: 1% auto 3% auto;
    padding: 8%;
    border: solid 1px rgba(64, 34, 15,0.8);
}
.payment p{
    margin-bottom: 15px;
    text-indent: -1em;
    padding-left: 2em;
}
.zoom-form{
    padding: 0 4%;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    
}
.zoom-form h3{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.zoom-form h3 , .other h3{
    margin: 5% auto 2% auto;
    background-color: rgba(207,184,171,0.8);
    padding: 10px 0 10px 20px;
    font-weight: bold;
}
.other-cap , .other-cap02 h4 , .other-cap02 p{
    padding: 0 20px;
}
.zoom-flow-con{
    border: solid 1px rgba(64, 34, 15,0.8);
    margin: 2rem auto;
    padding: 2rem;
}
.zoom-flow{
    display: grid;
    grid-template-columns: 30% 70%;
    margin: 1rem 0;
    align-items: center;
}
.zoom-flow-cap{
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 2rem;
}
.zoom-flow p:first-of-type{
    font-size: 1.05rem;
    font-weight: bold;
}
h4{
    margin: 1.5% 0 1% 0;
}

/* 送料等その他 */
.credit{
    grid-template-columns: repeat(2 ,100px);
    grid-row-gap: 15px;
    
}
/* 追記0404 */
.pur-area01{
    background-image: url(../image/back-image02.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* background-color: rgba(207,184,171,0.1); */
}
.toiawase-grid{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 6rem 1rem;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 50px;
    grid-row-gap: 50px;
}
.toiawase-grid p{
    text-align: center;
}
.toiawase-grid p a{
    color: rgb(64, 34, 15);    
    padding: 30px 0;
    background-image: url(../image/back-image06.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.toiawase-grid p a:hover{
    background-image: url(../image/back-image07.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-weight: bold;
    color: rgba(64, 34, 15, 0.9);
    transition: 0.8s ;
}
/* 追記0404 */
.sample1{
    list-style: inside;
    text-indent: -1em;
    padding-left: 1em;
    padding: 0 20px 0 40px;
}
/* メンテ中 */
.mente{
    font-size: 1.8rem;
    margin-bottom: 50px;
}
.mente a{
    display: inline;
    color: rgb(64, 34, 15);
    border-bottom: solid 1px rgb(64, 34, 15);
}
.karimail{
    color: rgb(64, 34, 15);
}
.online-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
.online-sel{
    font-weight: bold;
    /* border-bottom: double 4px rgb(64, 34, 15); */
    text-decoration: double 4px rgb(64, 34, 15);
}
.anchorzoom{
    padding-top: 50px; /*上に余白を付ける*/
    margin-top: -50px; /*上の余白を打ち消す*/
    }
.zoom-flow02{
    font-weight: normal !important;
}
.zoom-flow03{
    color: rgb(64, 34, 15);
}
.textlink a {
	position: relative;
	color: #333;
	text-decoration: none;
    display: inline;
}
.textlink a:hover {
	/* color: #b99b00; */
    color: rgb(64, 34, 15);
    /* color: #fff;
    background-color: rgb(64, 34, 15); */
    /* transition: 0.5s; */
    display: inline;
}
.zoom-flow03 a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background-color: #ceb849;
    /* background-color:rgb(64, 34, 15); */
	transition: width 0.3s;
}

.zoom-flow03 a:hover::after {
	width: 100%;
}