html,
button,
input,
select,
textarea {
    color: #121212;
}


li{list-style: none;}
a{transition: all  0.5s ease;cursor: pointer;text-decoration: none;border-bottom:dashed thin #a22041;color:#a22041}
a:visited{color:#a22041;}
a:hover{opacity: 0.8;color:#2f5d50;border-bottom:dashed thin #2f5d50;}

.pc-only{display: inherit;}
.sp-only{display: none;}

@media (max-width: 414px){
.pc-only{display: none;}
.sp-only{display: inherit;}
}

/* ==========================================================================
   General styles
   ========================================================================== */

html,
body {
    height: 100%;
    margin:0;
    padding:0;
}



body {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 15px;
    color: #121212;
    line-height: 180%;
    letter-spacing: 1px;


    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}
p{margin: 10px;}

/*　ハンバーガーボタン　*/
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0px;
  background: #fff;
}

.drawer-hidden {
  display: none;
}

.drawer-open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上に */
  cursor: pointer;

}

/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 2px;
  width: 25px;
  border-radius: 3px;
  background: #fff;
  transition: 0.5s;
  position: absolute;
}

/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 8px;
}

/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);
}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.drawer-content {
  width: 300px;
  height: 100%;
  position: fixed;
  top: 0;
  left: -100%;/* メニューを画面の外に飛ばす */
  z-index: 99;
  background: rgba(0,0,0,0.8);
  transition: 1s;
}

.header ul.drawer-list{
    padding-top:45px;
    list-style: none;
    padding-left:60px;
}

.drawer-list li{
    text-align: center;
    height:28px;
    border-bottom:thin dashed #fff;
    color:#fff;
    padding:15px 0px;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 0;/* メニューを画面に入れる */
}


/*コンテンツ*/

.flex-area{
    display: flex;
}

.flex-area-kitou{
    display: flex;
}


@media (max-width : 414px){
    
    .header ul.drawer-list{
    padding-left:0px;
}
    
    section{padding-left:0px;}
    
    .flex-area{
        display: inherit;}
}

.flex-between{
    justify-content: space-between;
}

.flex-center{
    justify-content: center;
}

.flex-area-wrap{
    flex-wrap: wrap;
}

.header{
    background:#121212;
    width:100%;
    height:60px;
}

.header ul.header-list{
    display: flex;
    align-items: flex-end;
}

.header li a{
    color:#fff;
    font-size:0.9rem;
    margin:0 10px;
    border:none;}
.header li a:hover{
    color:#3eb370;
}

@media (max-width: 1000px){
    .header ul.header-list{display: none;}
}

.top-img-flex{
    display: flex;
}

.side{
    background:#121212;
    width:60px;
    padding-top:25px;
    padding-left:5px;
}

.name-txt{
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode:vertical-rl; 
	writing-mode: vertical-rl;
    color:#fff;
    display: inline-block;
}

.name-line{
  font-family:sans-serif;
    letter-spacing:-0.2em;
    width:2rem;
    margin-right:.5em;
    
}

.name-line:after{
    content: "";
    padding:5px;
}

.text-combine {
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}

.top-img{
    position: relative;
    background: url(../img/top-img.jpg) no-repeat center top;
    background-size:cover;
    width:100%;
    height:100vh;
    z-index: 1;
}

.section2-top{
    position: absolute;
    top:85%;
    background: url(../img/bg-top-section2.png) no-repeat;
    background-size:cover;
    width:100%;
    height:260px;
    z-index: 100;
}
.top-logo {
    position:absolute;
    top:40%;
    left:50%;
    -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
   
}

.oshirase{
    position: absolute;
    top:75%;
    left:120px;
    background: url(../img/bg-oshirase.png) no-repeat;
    background-size: contain;
    width:500px;
    height:270px;
    z-index: 200;
    box-shadow: 1px 1px 3px #121212;
    padding:30px 45px;
}
.oshirase-frame{
    width:448px;
    height:135px;
    background: rgba(255,255,255,.5);
    overflow: scroll;
    padding:20px;
}

.br-sp{
        display:none;
    }
.br-mid{
    display: none;
}
.br-pc{
    display: block;
}

@media (max-width: 768px){
    .br-sp{
        display:none;
    }
    .br-mid{
    display: block;
}
    .br-pc{
    display: none;
}
}

@media (max-width: 414px){
    
    .side{
    display:none;
}
    
    .top-img{
    position: relative;
    background: url(../img/top-img.jpg) no-repeat 45% top;
    background-size:cover;
    width:100%;
    height:100vh;
    z-index: 1;
}

    
    .section2-top{
    display: none;
}
    
    .oshirase{
    position:relative;
    top:inherit;
    left:inherit;
    background: url(../img/bg-oshirase.png) no-repeat;
    background-size: cover;
    width:90%;
    height:230px;
    z-index: 200;
    box-shadow:inherit;
    padding:30px 5%;
}
.oshirase-frame{
    width:85%;
    height:135px;
    background: rgba(255,255,255,.5);
    overflow: scroll;
    padding:20px;
}

    .br-sp{
        display:block;
    }
    .br-mid{
        display: none;
    }
    .br-pc{
    display: none;
}
}


.midashi{font-size:1.2em}

.area-washi{
    background: url(../img/bg-washi.jpg)repeat-y center top;
    background-size:cover;
}

.contents{
    width:100%;
    max-width:1000px;
    margin:0 auto;
    position: relative;
}

@media (max-width: 1000px){
    .contents{
    width:95%;
    max-width:inherit;
    margin:0 auto;
    position: relative;}
}


.saiten{
    padding:100px 0px 100px;
}

.ttl-saiten{
    position: absolute;
    right:30px;
    z-index: 300;
}
.saiten-txt{
    display: block;
    width:450px;
    height:auto;
    padding:20px;
}

.saiten-txt p{
    word-wrap: normal;

}


@media (max-width: 500px){
    
    .saiten{
    padding:0px 0px 10px;
}
    
    .ttl-saiten{
    position:relative;
    right:inherit;
    font-size:20px;
    padding-top:15px;
    z-index: 300;
}
    
.saiten-txt{
    display: block;
    width:90%;
    height:auto;
    padding:0px 20px 20px;
}

}
.btn{
    display: block;
    width:195px;
    margin:0 0 0 auto;}

.btn a{
    display: block;
    width:150px;
    background: #E9E3E0;
    border:#B0ACAA 1px solid;
    color:#121212;
    padding:10px 20px;
    text-align: center;
}

.btn a:hover{
    background: #e4d2d8;
    border:#B0ACAA 1px solid;
    color:#121212;
    padding:10px 20px;
    text-align: center;
}

.area-topic {
    position: relative;
    background: url(../img/bg-topic.png)no-repeat center top;
    background-size:cover;
    margin-top:-100px;
    padding-top:140px;
    padding-bottom:100px;
    z-index:310;
}

.area-topic a{
    border:none;
}

@media (max-width: 500px){
.area-topic {
    position: relative;
    background: none;
    background-color:#e4d2d8;
    margin-top:0px;
    padding: 20px 0px;
    padding-bottom:0px;
    z-index:310;
    text-align: center;
}

}

footer{
    position: relative;
    width:100%;
    z-index:200;
}

.footer-img{
    width:100%;
    background: url(../img/bg-footer-shaden.jpg)no-repeat center top;
    background-size:cover;
    margin-top:-100px;
    height:550px;
    z-index:200;
}

.footer-contents{
    position: relative;
    width:100%;
    background: #121212;
}

.footer-txt{
    color:#fff;
    text-align: center;
    padding:50px;
}

.jinja-name{
    font-size:22px;
    letter-spacing: 3px;
}

footer a{color:#fff;border-bottom-color:#fff;}
footer a:visited{color:#fff;border-bottom-color:#fff;}


@media (max-width: 768px){
    .footer-txt{
    color:#fff;
    text-align: center;
    padding:30px 0px;
}
    
    
}

@media (max-width: 414px){
    footer{
    position: relative;
    width:100%;
    z-index:200;
}

.footer-img{
    width:100%;
    background: url(../img/bg-footer-shaden.jpg)no-repeat 70% top;
    background-size:cover;
    margin-top:0px;
    height:300px;
    z-index:200;
}

.footer-contents{
    position: relative;
    width:100%;
    background: #121212;
}

.footer-txt{
    color:#fff;
    text-align: center;
    padding:30px 0px;
}
}


#page-top a{
    position: fixed;
    right: 20px;
    bottom:20px;
    width:60px;
    height:60px;
    border-radius:10px;
    border:none;
    background:#92b5a9;
    color: #316745;
    padding:0px 0px 0px 0px;
    z-index:20000;
    font-size:20px;
    font-weight: bolder;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
#page-top a:hover{
    background-color:#316745;
    color:#92b5a9;
}

/*ーーーーーーーーーーーーー
セカンド
ーーーーーーーーーーーーーー*/

/*　ハンバーガーボタン　*/
.header_2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 0px;
  background: #fff;
}

.header_2 ul.drawer-list{
    padding-top:45px;
    list-style: none;
    padding-left:0px;
}
.header_2{
    background:#121212;
    width:100%;
    height:60px;
}

.header_2 ul.header-list{
    display: flex;
    align-items: flex-end;
}

.header_2 li a{
    color:#fff;
    font-size:0.9rem;
    margin:0 10px;
    border:none;}
.header_2 li a:hover{
    color:#3eb370;
}

@media (max-width: 1000px){
    .header_2 ul.header-list{display: none;}
}

.logo a{
    color:#fff;
    font-size:1.2rem;
    padding:15px 20px;
    border:none;
}

.logo a:hover{
    color:#3eb370;
    
}

.top-img_2{
    position: relative;
    background-size:contain;
    width:100%;
    height:60vh;
    z-index: 1;
}
.page-title-cover{
     width:100%;height:auto;padding-top:10%;
}
@media (max-width: 768px){
.page-title-cover{
     width:100%;height:auto;padding-top:20%;
}
}
.page-title{
    color:#fff;
    font-size:1.3rem;
    padding:15px;
    background: rgba(0,0,0,0.7);
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode:vertical-rl; 
	writing-mode: vertical-rl;
    position:relative;
    width:30px;
    margin:0 auto;
    display: block;
}

.page-title-2{
    color:#fff;
    font-size:1.3rem;
    padding:15px;
    background: rgba(0,0,0,0.7);
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode:vertical-rl; 
	writing-mode: vertical-rl;
    position:relative;
    width:30px;
    margin:0 auto;
    display: block;
    
}

h1{
    font-size:2rem;
    font-weight: lighter;
    text-align: center;
    
}

h2{
    font-size:1.8rem;
    font-weight: lighter;
    text-align: left;
    margin:0;
    padding-top:20px;
}

h3{
    font-size:1.2rem;
    font-weight: lighter;
    width:90px;
    margin:0;
    padding-top:10px;
    text-align: center;
}

h4{
    font-size:1.5rem;
    font-weight: lighter;
    margin:0;
    padding-top:10px;
    text-align: left;
    border-bottom:thin #444 dashed;
    margin-bottom:20px;
}

h5{
    font-size:1.2rem;
    font-weight: lighter;
    margin:0;
    padding-top:10px;
    text-align: left;
    margin-bottom:10px;
}

.area-topic_2 {
    position: relative;
    background: url(../img/bg-topic.png)no-repeat center top;
    background-size:cover;
    margin-top:-100px;
    padding-top:100px;
    padding-bottom:30px;
    z-index:10;
}

.flex-area-yuisho{
    display: flex;
}

@media (max-width: 768px){
.flex-area-yuisho{
    display: inherit;
}
    .flex-mid{
        display: flex;
        width:100%;
        overflow: hidden;
    }
    .flex-mid img{
        width:50%;
    }
}


@media (max-width: 414px){
    .area-topic_2 {
    position: relative;
    background: url(../img/bg-topic-sp.png)no-repeat left top;
    background-size:cover;
    margin-top:-100px;
    padding-top:70px;
    padding-bottom:20px;
    z-index:10;
}
   
    h3{
    text-align: left;
}

    .flex-mid{
        display: inherit;
    }
    .flex-mid img{
        width:100%;
    }

    
}

.area-washi_2{
    background: url(../img/bg-washi.jpg)repeat-y center top;
    background-size:cover;
    padding:80px 0px;
    margin-top:-60px;
    z-index:5;
}

.saijin{
    font-size:1.5rem;
    margin-left:50px;
    padding-left:50px;
    line-height: 2;
    border-left:thin #121212 dashed;
}

.saijin a {
    border-bottom:dashed thin #121212;
}

.syousai{
    width:450px;
    font-size:1.2rem;
    margin-left:50px;
    padding-left:50px;
    line-height: 1.6;
    border-left:thin #121212 dashed;
}

.btn_2{
    display: block;
    width:195px;
    margin:10px;}

.btn_2 a{
    display: block;
    width:150px;
    background: #E9E3E0;
    border:#B0ACAA 1px solid;
    color:#121212;
    padding:10px 20px;
    text-align: center;
    
}

.btn_2 a:hover{
    background: #e4d2d8;
    border:#B0ACAA 1px solid;
    color:#121212;
    padding:10px 20px;
    text-align: center;
}

.btn_3{
    display: block;
    width:auto;
    margin:10px;}

.btn_3 a{
    display: block;
    width:auto;
    background: #E9E3E0;
    border:#B0ACAA 1px solid;
    color:#121212;
    padding:10px 20px;
    text-align: center;
    
}

.btn_3 a:hover{
    background: #e4d2d8;
    border:#B0ACAA 1px solid;
    color:#121212;
    padding:10px 20px;
    text-align: center;
}


.hyo dt{
    width:180px;
     float: left;
    padding:15px 0px 0px 50px;
    
}

.hyo dd{
   
    padding:15px 15px 15px 210px;
    border-bottom:thin #121212 dotted;
    
}

.hyo-inu dt{
    width:80px;
     float: left;
    padding:15px 0px 0px 50px;
    font-weight: bold;
}

.hyo-inu dd{
   
    padding:15px 15px 15px 50px;
    border-bottom:thin #121212 dotted;
    
}

.honbun_txt{
    margin-left: 30px;
    margin-top:20px;
    padding-right:20px;
}

.sub_link {
    padding-top: 50px;
    width: 60%;
    margin: 0 auto;
    padding-bottom:50px;
}
.sub_link ul {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    list-style: none;
    padding: 10px 0px 0px 0px;
}
.sub_link li {
    margin-right: 20px;
}

.popup{
    position: relative;
    padding:30px 50px;
    width: auto;
    max-width: 620px;
    max-height: 520px;
    overflow-y: scroll;
    margin: 0px auto;
    background: #e6eae3;
    background-attachment: inherit;
}

@media (max-width: 500px){
    
    
    .btn_2{
    display: block;
    width:195px;
    margin:10px auto;}
    
    .saijin{
    font-size:1.5rem;
    margin-left:10px;
    padding-left:20px;
    line-height: 2;
    
}

.syousai{
    width:90%;
    font-size:1.2rem;
    margin-left:10px;
    padding-left:20px;
    line-height: 1.6;
    border-left:thin #121212 dashed;
}
    
    .hyo dt{
    width:180px;
     float: inherit;
    padding:15px 0px 0px 0px;
}

.hyo dd{
    padding:15px;
    margin:0;
    
}
    
    .hyo-inu dt{
    width:180px;
     float: inherit;
    padding:15px 0px 0px 0px;
}

.hyo-inu dd{
    padding:15px;
    margin:0;
    
}
    
    .honbun_txt{
    margin: 2px;
    padding:10px;
    width:95%;
}
    
    .sub_link {
    padding-top: 50px;
    width: 80%;
    margin: 0 auto;
    padding-bottom:50px;
}
.sub_link ul {
    display:inherit;
}
    
    .popup{
    padding:30px 10px;
    
}
.popup img{
    width:100%;    
    }

}

}


.footer-img_2{
    width:100%;
    background: url(../img/bg-footer-shaden.jpg)no-repeat center center;
    background-size:cover;
    margin-top:0px;
    height:200px;
    z-index:200;
}

.saijin_name{
     font-size:1.5rem;
    line-height: 2;
    border-bottom:thin #121212 dashed;
}

.saijin_kakomi{
        margin:20px 0 25px 50px;

}

.kaguramen_kakomi{
    padding:10px;
    width:30%;
    margin:0.2%;
    border:thin #2f5d50 dashed;
}

.kaguramen_name{
    font-size:1.2rem;
    color:#2f5d50;
    border-bottom:thin #2f5d50 solid;
}

.juyohin_kakomi{
    padding:20px 10px;
    width:30%;
    margin:0.5%;
    background: rgba(255,255,255,0.3);
}

.juyohin_kakomi img{
    filter: drop-shadow(1px 1px 3px #888);
}

.juyohin_name{
    font-size:1.2rem;
    color:#2f5d50;
    border-bottom:thin #2f5d50 solid;
}

.toi{
    margin-left:15px;
    margin-bottom:40px;
}
.toi dl{
    margin:10px;
}
.toi dt{
    font-weight: 100;
    float: left;
    line-height: 1.8;
}
.toi dd{
    line-height: 1.8;
    margin-left: 0px;
    padding-left: 220px;
    border-bottom: thin dotted #222;
    margin-bottom:5px;
    padding-bottom:5px;
}

@media (max-width: 768px){
    .kaguramen_kakomi{
    padding:8px;
    width:30%;
    margin:0.2%;
    
}
    
    
    .saijin_kakomi{
        margin:20px 0 25px 0px;}
    
    .juyohin_kakomi{
    padding:10px 5px;
    width:30%;
    margin:10px auto;
}
}
@media (max-width: 414px){
    .saijin_kakomi{
        margin:20px 0 25px 0px;

}
    
    .kaguramen_kakomi{
    padding:10px;
    width:90%;
    margin:10px auto;
}
    
    .juyohin_kakomi{
    width:95%;
    margin:10px auto;
}
    
    .toi dl{
    margin:5px;
}
.toi dt{
    float:inherit;
}
.toi dd{
    padding-left: 0px;
}
    input{width:100%;}
    textarea{width:100%;}

}


.koumoku{
    display: block;
    width:125px;
    margin:5px;
    background: #e4d2d8;
    border:#fff 1px solid;
    font-size:1rem;
    padding:10px 20px;
    text-align: center;}

.kakomi_pr{
    border:#e4d2d8 thin solid;
    background: rgba(255,255,255,0.7);
    border-radius: 20px;
    padding:20px 40px;
}

.column{
    background: rgba(255,255,255,0.5);
    padding:20px 40px;
}

.column-img{width:100%;max-width: 240px;padding-top:20px;}
.column img{width:240px;}

hr.kugiri{
    margin:80px auto;
    width:50%;
}

.keidai{
    width:100%;
    max-width:410px;
    margin:5px;
}
 .keidai img{width:100%;}

.text-width50{
    width:550px;
}

.red{
    color:red;
    font-weight: bold;
    font-size: 1.1rem;
    text-decoration: underline;
}

.yaku_sei{
    text-align: center;
    border-bottom:3px solid;
    width:30%;
    padding-bottom:5px;
    margin:10px auto;
    font-weight: bolder
}

@media (max-width: 768px){
    .column{
    background: rgba(255,255,255,0.5);
    padding:20px 10px;
}
    .keidai{
    width:45%;
    max-width:350px;
    margin:5px auto;
}
 .keidai img{width:100%;}
}
    

    
@media (max-width: 414px){
    
    .column{
    background: rgba(255,255,255,0.5);
    padding:20px 10px;
}
    .column-img{width:100%;max-width:inherit;}
    .column img{width:inherit;}

   .keidai{
    width:92%;
    margin:5px;
} 
    .keidai img{width:100%;}
    
    .text-width50{
    width:100%;
}
}