@charset "shift_jis";

/* ------------------ 
デフォルトスタイルリセット用
------------------ */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,
blockquote,th,td {
    margin: 0;
    padding: 0;
}
h1,h2,h3,h4,h5,h6 {
       font-size: 100%;
       font-weight: normal;
}
ol,ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
fieldset,img {
       border: 0;
}
table {
       border-spacing: 0;
       border-collapse: collapse;
}
caption,th {
    text-align: left;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
}

/* ------------------ 
ページ全体
------------------ */
body {
    margin: 0;
    padding: 0;
    color: #111111;
    text-align: center;
    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Roboto, 'Droid Sans', sans-serif;
    background-color: #FFFFFF;
}
#WRAP {
    width: 100%;
    margin: 0 auto;
    background-color: #FFFFFF;
}
html {
    
}
h1 {
    font-size: 0.8em;
    font-weight: normal;
    line-height: 1.2;
    margin: 0;
    text-align: left;
}
.h1 {
    font-size: 1.0em;
    font-weight: normal;
    line-height: 1.2;
    margin: 0;
    text-align: left;
}
h2 {
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.2;
}
h3 {
    font-size: 105%;
    font-weight: normal;
    margin-bottom: 1em;
}
h4 {
    font-size: 1.0em;
    font-weight: bold;
}
p,pre,td {
    font-size: 95%;
    line-height: 160%;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 1em;
    margin-left: 0;
}
div,td,th {
    text-align: left;
}
hr {
    height: 1px;
}

/* ------------------
  ヘッダ
------------------ */
#header {
    width: 96%;
    text-align: left;
    background-color: #FFFFFF;
}
#header h2 {
    margin-top:0; 
    margin-left: 0;
    position: absolute;
}
#header h2 a {
    color: #0000FF;
    text-decoration: none;
}
#title {
    width: width: 96%;
    position: relative;
}

.mp_menu {
    display: none;
}
.sp_menu {
/*    display: none; */
    font-size: 0.8em;
    line-height: 1.2;
    color: #FF0066;
}

/* ------------------
  ヘッダナビゲーション
------------------ */
#h_navi {
    display: none;
/* 
    width: 760px;
    background-color: #ffffff;
    margin: 0;
 */
}
/* 

#h_navi_left {
     float: left;
    height: 30px;
       width: 20px;
       margin: 0;
}
#h_navi_right {
    float: left;
    height: 30px;
    width: 20px;
    margin: 0;
}
#h_navi ul {
    float: left; 
    margin: 0;
    list-style: none;
    background: url(../images/h_navi01.gif) no-repeat;
}
#h_navi li,#h_navi a{
    float: left;
    display: block;
    height: 30px;
    width: 120px;
    background: url(../images/h_navi01.gif) no-repeat;
    text-indent: -9999px;
}

#h_navi02 a { background-position: -120px 0 ;}
#h_navi03 a { background-position: -240px 0 ;}
#h_navi04 a { background-position: -360px 0 ;}
#h_navi05 a { background-position: -480px 0 ;}
#h_navi06 a { background-position: -600px 0 ;}
#h_navi01 a:hover { background-position: 0 -30px ;}
#h_navi02 a:hover { background-position: -120px -30px ;}
#h_navi03 a:hover { background-position: -240px -30px ;}
#h_navi04 a:hover { background-position: -360px -30px ;}
#h_navi05 a:hover { background-position: -480px -30px ;}
#h_navi06 a:hover { background-position: -600px -30px ;}

 */




/* ------------------
  ページ本体（2段組み）
------------------ */
#pagebody {
    width: 96%;
    height: auto;
    background-color: #FFFFFF;
/* 
    margin-left: auto; 
    margin-right: auto;
    padding: 0;
    background: #ffffff url(../images/bg_pagebody.gif) repeat-y;
 */
}
#pagebody a {
    color: #0000FF;
    text-decoration: underline;
}
#pagebody a:visited {
    color: purple;
}
#pagebody a:hover,
#pagebody a:active,         /* for IE (Keyboard) */
#pagebody a:focus         /* for Netscape (Keyboard) */
{
    color: #FF0099;
}


#content {
    width: 100%;
    background-color: #FFFFFF;
/* 
    margin-top: 0;
    padding: 0;
 */
}
#main {
    width: 100%;
    background-color: #FFFFFF;
/* 
    float: right;
    margin: 10px 0 0;
    padding-right: 8px;
 */
}
#main_wrap {
    font-size: 110%;
    line-height: 180%;
    background-color: #FFFFFF;
/* 
    margin: 0;
    width: 550px;
 */
}
#naviarea {
    width: 100%;
/* 
    float: left;
    margin: 10px 0 0;
    padding-left: 15px;
 */
}
#FOOTER {
/* 
    background: #ffffff url(../images/bg_pagebody.gif) repeat-y;
    margin: 0 auto 20px;
    padding: 0;
 */
}

/*------------------
 メイン
------------------*/
.section {
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    /* ★ 本文に別フォントを設定 210501 */
    font-family: -apple-system, BlinkMacSystemFont, Meiryo, 'メイリオ' ;
/* 
    width: 550px;
    background: url(../images/main/main_section_inner.gif) repeat-y;
 */
}
.section-index {
    margin: 0;
    padding: 0;
/* 
    float: left;
    width: 550px;
 */
}
.section h2 {
    margin: 0;
    padding: 15px 20px 0;
    color: #FF0066;
    float: left;
 */
}
.section-inner {
    margin: 0 0 0 5%;
    padding: 0;
    width: 90%;
    clear: both;
}

.section_bottom { 
    display: none;
}

/* 
.inner-right {
    margin: 0;
    padding: 0;
    width: 360px;
    float: right;
}
 */

/* 
.inner-left {
    margin: 0;
    padding: 0;
    width: 100px;
    float: left;
    font-size: 0.8em;
}
 */

.check_box1 {
    padding: 5px;
    background: #FFF6F6;
}
.check_box1 li.check_box1 {
    font-size: 110%;
    line-height: 130%;
    text-indent: 20px;
    margin-bottom: 10px;
    background: url(../images/check-mark.gif) no-repeat left top;
    font-weight: bold;
}
.check_box2 li.check_box2 {
    line-height: 1.2;
    text-indent: 20px;
    margin-bottom: 1em;
    background: url(../images/ya01.gif) no-repeat left top;
}



#Syojo_01_div {
    background-image: url(../images/sub_Shojo_01.gif);
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    height: 220px;
    width: 480px;
}
#Syojo_01_ul {
    font-size: 1px;
    padding: 0px;
    margin: 0px;
    display: block;
    text-decoration: none;
    text-indent: -9999px;
    color: #FFFFFF;
}

.scroll-box {
    width: 95%;                /* 横幅 */
    height: 400px;               /* 横幅 */
    border: 2px solid #222;      /* わかりやすくボーダーを引く */
    overflow-y: scroll;          /* 縦方向にスクロール可能にする */
    padding: 5px;
}
.scroll-box::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scroll-box::-webkit-scrollbar-track {
  background: #ddd;
}
.scroll-box::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #009900;
}

.voice {
    padding: 7px;
    border: 1px solid #FF9966;
    margin-bottom: 10px;
    line-height: 150%;
    font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}
.voice_wine {
    padding: 7px;
    border: 1px solid #AA0044;
    margin-bottom: 10px;
    line-height: 150%;
    font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}


#toiawase table {
    border: solid 1px #000000;
    border-collapse: collapse;
    width: 460px;
    font-size: 1em;
    margin: 0 auto;
}
#toiawase th {
    font-weight: bold;
    padding: 3px;
    width: 130px;
    border: 1px black solid;
}
#toiawase td {
    border: 1px black solid;
    border-collapse: collapse;
    margin: 0;
    padding: 3px;
    width: 330px;
}
.tr_1 {
    background-color: #E0FFF0;
}
.tr_2 {
    background-color: #FFFFFF;
}

#open table {
    border: solid 1px #226600;
    border-collapse: collapse;
    font-size: 1em;
    width: 476px;
    margin: 0 auto;
}
#open th {
    border: solid 1px #226600;
    border-collapse: collapse;
    padding: 3px;
    font-style: normal;
    text-decoration: none;
}
#open td {
    border:  solid 1px #226600;
    border-collapse: collapse;
    padding: 3px;
    text-align: center;
    width: 48px;
}

#course table {
    border: solid 1px #226600;
    border-collapse: collapse;
    font-size: 1em;
    width: 476px;
    margin: 0 auto;
}
#course th {
    border: solid 1px #226600;
    border-collapse: collapse;
    padding: 3px;
    font-style: normal;
    text-decoration: none;
}
#course td {
    border:  solid 1px #226600;
    border-collapse: collapse;
    padding: 3px;
    text-align: right;
}

#flow table {
    width: 470px;
    margin: 0 auto;
}
#flow td {
    padding: 3px;
    border-bottom: solid 1px #226600;
    border-collapse: collapse;
    font-size: 90%;
    line-height: 150%;
}

.box_green {
    border: 1px solid #000066;
    margin-bottom: 7px;
    padding-top: 15px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 7px;
}

#profile {
    height: 200px;
    margin-bottom: 10px;
}
.koe {
    font-size : 1.0em;
    font-weight: bold;
}
#map_area {
    text-align: center;
    margin-bottom: 10px;
}
#map {
    font-size: 90%;
    line-height: 130%;
}


.kansen dt {
    font-size: 120%;
    font-weight: bold;
    margin: 20px 0 0 0;
}
.kansen dd {
    margin: 10px 0 0 15px;
}


/* ----------------
 左ナビゲーション
------------------ */
#left_new { display: none; }
#left_w3c { display: none; }
#left_menu { display: none; }
#naviarea { display: none; }
.img_b_back { display: none; }


.left {
    font-size: 100%;
    float: left;
    color: #333333;
    background-color: #FFF2D9;
    margin: 0 5px 10px 0;
    width: 175px;
}
.left_h2 {
       font-size: 1.1em;
       color: #FFFFFF;
       text-align: center;
       background: url(../images/side/side_title01.gif) no-repeat;
       width: 175px;
       height: 25px;
       padding-top : 6px;
    font-weight: bold;
}
.left_wrap {
    font-size : 90%;
    padding: 8px 10px;
}
.left_scroll {
       height: 150px;
       overflow: auto;
       width: 13em;
       background-color: #ffffff;
       border: 1px solid #dddddd;
       padding: 5px;
}






/* ------------------
  フッタ
------------------ */
#footer1 {
    text-align: center;
    width: 96%;
    margin: 0;
    padding: 10px;
}
#footer1 h2 {
       font-size: 1.4em;
       text-align: center;
       padding-bottom: 5px;
}
#footer2 {
    display: none;
/* 
    text-align: center;
    width: 760px;
    margin: 0;
    padding: 10px;
 */
}
#footer2 a {
    color: #0000FF;
    text-decoration: underline;
}
#footer2 a:visited {
    color: purple;
}
#footer2 a:hover,
#footer2 a:active,        /* for IE (Keyboard) */
#footer2 a:focus {        /* for Netscape (Keyboard) */
    color: #0000FF;
    background-color: #FFFFCC;
}

#footer_c {
    text-align: center;
    width: 96%;
    margin: 0;
    padding: 10px;
}

#footer3 {
    display: none;
/* 
    margin: 0;
    padding: 0;
    display: block;
    width: 760px;
    height: 15px;
    text-align: center;
    background-color: #FFFFFF;
    color: #FFFFFF;
    font-size: 70%;
    background-image: url(../images/bg_footer3.gif);
 */
}
#footer3 p{
    font-size: 9px;
    line-height: 0.9;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 1px;
    color: white;
}
#footer3 a {
    color: white;
    text-decoration: none;
}
#footer3 a:hover {
    color: white;
    text-decoration: underline;
}

/* ------------------ 
 フロートボックス解除用。htmlでは<br class="clear" />で使用 
------------------ */
.clear {
    clear: both;
}

/* ------------------
 テキスト用
------------------ */
.b {
    font-weight: bold;
}
.s {
    text-decoration: line-through;
}
.u {
    text-decoration: underline;
}
.large {
    font-size: 200%;
    line-height: 150%;
}
.small {
    font-size: x-small;
}
.bg_yell {
    background-color: #FFEEAA;
}
.text_right {
    text-align: right;
    margin-right: 20pt;
}
.center {
    text-align: center;
}
.right {
    text-align: right;
}
.plus25 {
    font-size: 125%;
}
.pink {
    color: #FF0066;
}
.green {
    color: #226622;
}
.red {
    color: #CC0000;
}
.blue {
    color: #0000CC;
}
.brown {
    color: #4D2C00;
}
.bluegreen {
    color: #006622;
}
.purple {
    color: #270042;
}
.wine {
    color: #AA0044;
}
.darkblue {
    color: #003F51;
}
.orange {
    color: #CC6600;
}
.navy {
    color: #000099;
}

.img_right {
    padding: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 10px;
}
.td {
    font-size: 95%;
    line-height: 150%;
    color: #222222;
}
.plus10 {
    font-size: 105%;
}
.m15 {
    font-size: 85%;
}



/* ------------------
  各イメージ画像
------------------ */

#img_header_pc    { display: none; }
#img_header_smart { width: 100%; height: auto; }

.img_480-40 { width: 100%; height: auto; }
.img_480-50 { width: 100%; height: auto; }
.img_480-60 { width: 100%; height: auto; }
.img_480-70 { width: 100%; height: auto; }
.img_480-80 { width: 100%; height: auto; }
.img_480-90 { width: 100%; height: auto; }
.img_480-100{ width: 100%; height: auto; }
.img_480-160{ width: 100%; height: auto; }
.img_480-120{ width: 100%; height: auto; }
.img_480-180{ width: 100%; height: auto; }
.img_480-200{ width: 100%; height: auto; }
.img_480-220{ width: 100%; height: auto; }
.img_480-240{ width: 100%; height: auto; }
.img_480-380{ width: 100%; height: auto; }
.img_400-340{ width: 100%; height: auto; }
.img_480-340{ width: 100%; height: auto; }
.img_360{ width: 100%; height: auto; }
.img_250-185{ width:  50%; height: auto; }

.img_240-50 { width:  50%; height: auto; }
.img_240-150{ width:  50%; height: auto; }

.img_map_l_02 { width: 100%; height: auto; }

.img_sub_title_01 { width: 100%; height: auto; }
.img_sub_index    { width: 100%; height: auto; }
.img_Coupon_01           { width: 100%; height: auto; }
.img_main_section_bottom { display: none; }


/* ------------------
  ナビゲーションドロワー＆ハンバーガーメニュー
------------------ */

/* headerタグを避けるスペース */
#header { 
  margin-top: 80px;
}
/* headerタグ */
header {
  position:fixed;
  left:0;
  top:0;
  width:100%;
  padding:10px;
  background: #55cc55;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  z-index:999;
}

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px; /*線の太さ*/
  width: 25px; /*長さ*/
  border-radius: 3px;
  background: #111111;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
    bottom: -8px;
}
#nav-open span:after {
    bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none; /*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0; /*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 42px; /*headerを避ける*/
  left: 0;
  z-index: 9999; /*最前面に*/
  width: 70%; /*右側に隙間を作る*/
  max-width: 200px; /*最大幅*/
  height: 80%;
  background: #FFFAF0; /*背景色*/
  transition: .3s ease-in-out; /*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%); /*左に隠しておく*/
}
/*各ページへのリンクliの装飾*/
#nav-drawer { 
  margin: 0px;
}
#nav-drawer > li { 
  margin: 5px 10px 5px 10px;
  padding: 5px; 
  background: #ffcab0; /*背景色*/
}
li.nav-d-pink { 
  background: #ffb7e2!important; /*背景色*/
}
li.nav-d-H { 
  background: #D2DCFD!important; /*背景色*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block; /*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%); /*中身を表示*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

/* 終 smart.css */



/* Yahoo!地図 埋め込み PC/SP 切替 */
.map_pc { display: none; }
.map_sp { display: block; }