@charset "utf-8";


@import url("./layout.css");
@import url("./common.css");
@import url("./parts.css");
@import url("./sp-layout.css") screen and (max-width: 1080px);
@import url("./sp-common.css") screen and (max-width: 1080px);
@import url("./sp-parts.css") screen and (max-width: 1080px);
/* 全体 */
:root {
  scroll-padding:3rem;
}
a:visited{
    color: initial;
}
#main_body h2{
    background: none;
	letter-spacing: initial;
}
#main_body h2:before{
	content: none;
}
#main_body h3, .kakuka_info_ttl, .life_cat_list_ttl{
    border: none;
    padding: 0;
	letter-spacing: initial;
}
#main_body h3:after, .kakuka_info_ttl:after, .life_cat_list_ttl:after{
	content: none;
	border: none;
}
#main_body h4,
#main_body h5{
    background: none;
	letter-spacing: initial;
	padding: 0;
}
body.no-scroll {
  overflow: hidden;
  position: fixed; /* スマホでの背景スクロール防止に有効 */
  width: 100%;     /* レイアウト崩れ防止 */
}
/* ヘッダ */
#header {
	width: auto;
	height: auto;
	margin: 0px;
	padding: 0px;
}
#he_left{
    width: 35%;
}
#he_right{
    width: 65%;
}

/* フッタ */
#footer {
	clear: both;
	width: auto;
	height: auto;
	margin: 0px;
	padding: 0px;
}


#header{
  background:  url("../../img/ouen/ouen_gnav-headbg.png") no-repeat center top;
 min-height: 166px; 
  z-index: 1;
  position: relative;
}
#header2{
  border: 0;
}

#header2_box{
  padding: 10px 0;
}
#he_left #logo img{
	max-height: 100px;
    width: auto;
}

.header_nav .ouen-gNav-shien button.ouen-support_menu_open,
.header_nav .ouen-gNav-lang button.h_lang_btn{
    color: #222;
  background-color: transparent;
  border: 0;
  &:hover{
    text-decoration: underline;
  }
}


.header_nav ul{
    gap: 40px;
}
.header_nav ul.ouen-gNav{
  padding-top: 10px;
    gap: 10px;
}
.header_nav ul.ouen-gNav a{
	display: block;
    line-height: 0;
}

/*lang*/

.ouen-lang_list_area {
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  margin-top: 4px;
  padding: 8px;
  z-index: 100;
}

.ouen-lang_list_area[aria-hidden="false"] {
  display: block;
}

.ouen-lang_list_area ul.lang_list{
  display:block;
  margin-top: 0;
}

.lang_list li {
  list-style: none;
}

.lang_list li button {
  background: none;
  border: none;
  padding: 6px 12px;
  text-align: center;
  width: 100%;
  cursor: pointer;
}

.lang_list li button:hover,
.lang_list li button:focus {
  background: #eef;
}

.ouen-btn_spnav_close {
  display: block;
  margin-top: 8px;
  background: #402323;
  color: #fff;
  border: none;
  padding: 3px 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
}


/*
開閉ボタン*/

    :root{
      --btn-size: 90px;
      --gap: 8px;
    
      
      --z: 9999;
    }

.kosodate-toggle_wrap{
      position: absolute;
    top: 170px;
      right: 0;
	z-index: 100;
}
    .kosodate-toggle{
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: var(--gap);
      z-index: var(--z);
    }

    .toggle-btn{
      min-inline-size: var(--btn-size);
      min-block-size: var(--btn-size);
      border: none;
      background: #EEEBDF;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 6px;
      color: #111; /* icon uses currentColor */
    }

.toggle-btn.nav_open{
    position: fixed;
    top: 10px;
    z-index: 999;
    width: 60px;
    right: 20px;
}

    .icon{
      width: 36px;
      height: 36px;
      position: relative;
      margin-bottom: 4px;
      display: inline-block;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .icon span{
      position: absolute;
      left: 0;
      right: 0;
      height: 3px;
      background: currentColor;
      border-radius: 2px;
      transform-origin: center center;
      transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .18s linear;
      top: 50%; /* 全て中央基準 */
border: 1px solid #EEEBDF;
    }
    /* 初期状態は上下にオフセット */
    .icon span:nth-child(1){ transform: translateY(-12px); }
    .icon span:nth-child(2){ transform: translateY(0); }
    .icon span:nth-child(3){ transform: translateY(12px); }

    /* 開いた時は中央に集めて回転（歪み防止のため translate を先にしてから rotate） */
    .toggle-btn[aria-expanded="true"] .icon span:nth-child(1){ transform: translateY(0) rotate(45deg); }
    .toggle-btn[aria-expanded="true"] .icon span:nth-child(2){ opacity: 0; transform: translateY(0); }
    .toggle-btn[aria-expanded="true"] .icon span:nth-child(3){ transform: translateY(0) rotate(-45deg); }

    .label{ font-size: 1.2rem; line-height: 1; }

/*
    .toggle-btn:focus-visible{ outline: 3px solid Highlight; outline-offset: 3px; }
*/
    @media (forced-colors: active){ .toggle-btn{ background: Canvas; border: 1px solid ButtonText; } }

    .panel{
    visibility: hidden;
    width: calc(100% - 20px);
    position: fixed;
	top: -100%;
    right: -100%;
      overflow: auto;
      background: #EEEBDF;
      opacity: 0;
    -webkit-transition: 0.35s;
    transition: 0.35s;
    overflow-y: auto;
    padding: 0 10px;
    }
    .panel.open{ 
    visibility: visible;
	opacity: 1;
    position: fixed;
	top: 0;
    right: 0;
    z-index: 100;
}

    @media (max-width: 480px){ :root{ --panel-w: min(96vw, 420px); } }
    @media (prefers-reduced-motion: reduce){ .icon span{ transition: none; } .panel{ transition: none; } }
    .panel ul,.panel li{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .panel li{margin-bottom: .5em;}
    .panel li a img{vertical-align:bottom;}
    .panel li a{display: block; text-align: center; color: #000; text-decoration: none; font-size: 1.4rem;}
    .panel li a:hover{text-decoration:underline;}
    .panel li a span{display: block;}

.width-inner{
  @import screen and (min-width: 1081px) {
	width: var(--content-width, 1080px);
  }
	height: auto;
	margin: 0px auto;
	padding: 0px;
}




.header_nav .ouen-gNav-shien button.ouen-support_menu_open::before{
  content: url("../../img/ouen/ouen_gnav-shien.svg");
  vertical-align: middle;
  margin-right: .2em;
  background: #FFFDF3;
  border-radius: 20px;
  padding: 1px 3px 0 3px;
}

.header_nav .ouen-gNav-lang button.h_lang_btn::before{
  content: url("../../img/ouen/ouen_gnav-lang.svg");
  vertical-align: middle;
  margin-right: .2em;
  background: #FFFDF3;
  border-radius: 20px;
  padding: 1px 3px 0 3px;
}
.panel .panel_inner{
    width: calc(100% - 240px);
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 40px;
}
.panel .togglenav_btns{
    display: flex;
    justify-content: flex-end;
}
.panel .togglenav_btns a{
	background: #fff;
    padding: 25px;
    border-radius: 10px;
color:#000;
}
.panel .togglenav_btns .btn_jinzai a{
    display: block;
/*	background: #fff url("../../img/wakamono/wakamono_ic_jinzai02.png");*/
	background: #fff url("../../img/wakamono/wakamono_ic_jinzai.png");
	background-repeat: no-repeat;
    background-position: left 4px center;
    padding-left: 80px;
	text-decoration: none;
}
.panel .togglenav_btns .btn_jinzai a:hover{
	text-decoration: underline;
}
.panel .togglenav_kw .nav_genre{
	background: url("../../img/wakamono/wakamono_ic_search02.png");
	background-repeat: no-repeat;
    background-position: left center;
    padding-left: 66px;
	font-size: 4.0rem;
    margin: 10px 0 20px;
}
.panel .togglenav_kw .search_ipt{
    background: #fff;
    display: flex;
    border-radius: 100px;
}
.panel .togglenav_kw #tmp_query_nav{
border:1px solid #9EC3BC;
    border-radius: 100px 0 0 100px;
    display: inline-block;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: calc(100% - 160px) !important;
    padding: 15px;
    background-position-x: 30px !important;
}
.panel .togglenav_kw #submit_nav{
    display: inline-block;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 160px;
    border: 1px solid #9EC3BC;
    color: #333333;
    margin: 0px;
    padding: 0px;
    font-size: 2.6rem;
    line-height: 3.8rem;
    letter-spacing: 0.1em;
    background: #503d2f;
    color: #fff;
    border-radius: 0 100px 100px 0;
}
.panel .sns_btns{
    margin-top: 120px;
}
.panel .sns_btns ul{
	display: flex;
    justify-content: center;
    gap: 20px;
span{
display: inline-block;
margin-left:.5em;
}
}
/*
.panel .sns_btns ul img{
	height: 60px;
}
*/

    #inc-gNav .ouen-gNav{
      display: block;
      text-align: center;
      margin-top:4em;
    }
    
    #inc-gNav .ouen-gNav li{
      display: inline-block;
      margin: 10px 2em!important;
      width: auto;
      @media screen and (max-width: 1080px) {
        display: block;
        width: 100%;
      margin: 0!important;
        margin-bottom: 2em!important;
      text-align: center;
      }
    }
    #inc-gNav .ouen-gNav li a{
      display: block;
      @media screen and (max-width: 1080px) {
      display: inline-block;
      }
    }
    #inc-gNav .ouen-gNav li img{
    max-width: none;
    width: auto;
    max-height: 60px;
border:1px solid #FFF;
border-radius: 100px;
    }
    #inc-gNav .ouen-gNav li:last-child img{
}


#shortcut_links{
    width: var(--btn-size) max-height: min(70vh, 600px);
    overflow: auto;
    box-shadow: var(--shadow);
    padding: 10px;
}
#shortcut_links ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
#shortcut_links ul li{
    margin: 0;
    padding: 0;
    list-style: none;
    margin-bottom: .5em;
}
#shortcut_links ul li a{
    display: block;
    text-align: center;
    color: #000;
    text-decoration: none;
    font-size: 1.4rem;
}
#shortcut_links ul li a img{
    vertical-align: bottom;
}
#shortcut_links ul li a span{
    display: block;
}
#footer .sns_items{
  text-align: center;
padding:0!important;
}
#footer .sns_items li{
  list-style: none;
  padding: 0;
  margin: 0 .5em;
  display: inline-block;
@media screen and (max-width: 1080px) {
  margin: .5em;
}
}
#footer .sns_items li a{
	display: block;
    line-height: 0;
}
.sns_items img{
/*
width:40px;
*/
      width: auto;
      max-width: 2em;
      margin-right: .5em;
}
 .sns_items li a{
color:#000;
}

    .sns_items img{
      vertical-align: middle!important;
      width: auto;
    }
.sns_items img span{
  display: inline-block;
}
#footer{
  padding-top: 1px;
  background: #F5C1BE;
}

#copyright {
    background: #EEEBDF!important;
}
.gototop{
  padding-top: .5em;
  text-align: center;
}
.gototop a{
color:#000;
}
#copyright p{
  background: #EEEBDF;
  color: #544337;
}
/* ==================================================
タブレット
================================================== */
@media screen and (max-width: 1080px) {


    .panel .nav_mainmenu ul{
      display: block;
    }
    .panel .nav_mainmenu ul li{
      width: 100%!important;
      margin-bottom: 1em;
      text-align: left;
    }
    .panel .nav_mainmenu ul.local_menu li a{
      display: block;
      width: 100%;
      text-align: center;
    }
    .panel .nav_mainmenu ul.local_menu li a img{
      display: block;
      margin: 0 auto;
    }

.panel .sns_btns ul{
display:block;
}
.panel .sns_btns ul li{
      margin-bottom: 1em;
}

}
/* ==================================================
タブレット ここまで
================================================== */




@media screen and (max-width: 1400px) {
	#header{
		background-position: center top -20px;
	}
#header2_box{
	padding-right: 100px;
    width: calc(100% - 100px);
}
	.kosodate-toggle_wrap{
    top: 10px;
	}
	#he_left #logo img{
max-height: 80px;
	}
	.header_nav ul.ouen-gNav img{
height: 50px;
        width: auto;
        max-width: none;
	}
	.panel .togglenav_kw .nav_genre{
    font-size: 2.8rem;
    background-size: auto 49px;
    padding-left: 50px;
	}
	.panel .togglenav_kw #submit_nav{
    font-size: 2.0rem;
	}
}

@media screen and (max-width: 1080px) {
	:root {
    --btn-size: 50px;
}
img{
  width: 100%;
  max-width: 100%;
 height: auto; 
}
  #header{
    background: #FFFDF3;
    box-shadow: 3px 3px 2px rgba(0,0,0,0.1);
        min-height: auto;
  }
	#he_left{
width:65%;
        width: auto;
        order: 1;
        padding: 0;
	}
	#he_right{
		order: 2;
	}
#he_left #logo img{
  max-width: 90%;
        max-width: none;
        height: 52px;
}
  #he_right{
    display: none;
  }
  .header_nav{
    display: block;
    background: none;
  }
  .header_nav ul,
  .header_nav ul.ouen-gNav{
    display: flex;
    padding: 0;
    margin-top: 1em;
    margin-bottom: 0;
    justify-content: center;
    flex-wrap: nowrap;
  }
.header_nav ul{
    display: block;
}
	.header_nav ul.ouen-gNav{
		display: none;
}
	#shortcut_links.shortcut_wakamono{
/*display:none;*/
    position: fixed;
    bottom: 0;
    left: 0;
        border-left: none !important;
        border-bottom: none !important;
    width: 100% !important;
        padding: 0;
    margin: 0 !important;
	}
#shortcut_links ul{
    display: flex;
    justify-content: space-evenly;
}
#shortcut_links ul li{
    margin: 0;
}
#shortcut_links ul li a{
    padding: 3px 3px 0;
}
#shortcut_links ul li a img{
    width: 30px;
}
	.kosodate-toggle_wrap{
		top: 5px;
		right: 10px;
	}
	.toggle-btn{
   /* border-right: 2px solid #fff;*/
	}
	.toggle-btn.nav_open{
   /* border-right: 2px solid #9ec3bc;*/
    top: 5px;
    right: 10px;
	}
	.panel .panel_inner{
    width: 100%;
        padding-top: 10px;
	}
	.panel_inner .header_nav{
        margin-right: 100px;
	}
	.panel_inner .header_nav ul{
        justify-content: flex-start;
        flex-wrap: wrap;
        /*margin-top: 30px;*/
	}
	.panel_inner .header_nav li{
        display: flex;
        display: block;
	}
	.panel .togglenav_btns{
    justify-content: flex-start;
    margin-top: 30px;
    flex-direction: column;
        gap: 10px;
	}
	.panel .togglenav_kw{
		margin-top: 30px;
	}
	.panel .togglenav_kw .nav_genre{
		margin-top: 0;
		font-size: 2.0rem;
        background-size: auto 35px;
        padding-left: 38px;
        margin-bottom: 14px;
	}
	.panel .togglenav_kw #tmp_query_nav{
    width: calc(100% - 90px) !important;
	}
	.panel .togglenav_kw #submit_nav{
    min-width: 90px;
        font-size: 1.8rem;
	}
	.panel .sns_btns {
    margin-top: 60px;
}
	.panel .sns_btns ul img {
 
}
}


#pankuzu_wrap > div {
  flex-wrap: wrap;
}

/*#header2_box{
  flex-direction:initial;
@media screen and (max-width: 1080px) {
  display:block;
}

#he_left{
  @import screen and (min-width: 1081px) {
  width: 50%;
  }
  order:inherit;
}
#he_right{
  @import screen and (min-width: 1081px) {
  width: 50%;
  }
  order:inherit;
}*/