@charset "utf-8";
:root {
    --base-width:800px;
    --sky-blue: #9CD5DB;
    --sky-blue2: #DAF1EF;
    --sky-blue3: #f4fafb;
    --emerald-green: #47CCBF;
    --emerald-green2: #51BCB2;
    --red-orange: #DB4D42;
    --yellow: #F1EC56;
    --text-gray: #595757;
    --vwh:calc(100 / 800);
    --min:calc(100 / 375);
  }

* {font-family: 'Noto Sans JP', sans-serif; padding:0px; margin:0px; box-sizing:border-box; color:var(--text-gray); }
body { overflow-x:hidden;}
img {width:100%; vertical-align: bottom;}
ul,ol {list-style-type: none;}
a {text-decoration:none;}
header,nav,main,footer {width:100%;}
header .inner, nav .inner, main .inner, footer .inner {max-width:var(--base-width); width:100%; margin:0px auto;}

header {position:relative;  z-index:2;}
nav {position:relative;  z-index:1;}
main {position:relative;  z-index:0;}
footer {position:relative;  z-index:3;}

/* header */
header {border-bottom:2px solid var(--sky-blue); padding:20px 0 10px 0; background:#fff;}
header .inner {display:flex; align-items: center;}
header div:nth-of-type(1) {flex-basis:50%;}
header div:nth-of-type(2) {flex-basis:50%; text-align:right;}
header div:nth-of-type(3) {display:none;}
header h1 {width:200px;}
header address {width:218px; display:inline-block;}

/* メニュー */
nav {position:relative;  box-shadow:0 0 50px rgb(0, 0, 0, 0.2); background:#fff;}

nav ul.main_nav {display:flex; position:relative; z-index:1;}
nav ul.main_nav li.mnl {flex-basis:25%; text-align:center; padding:3px 0; display: inline-block; display: flex; align-items: center; position:relative;}
nav ul.main_nav li.mnl::after {content:""; height:70%; border-right:1px solid #ccc;}
nav ul.main_nav li.mnl:nth-child(3):after,
nav ul.main_nav li.mnl:nth-child(4):after {content:none;}

nav ul.main_nav li.mnl a.mna {display:block; padding:10px 0; width:100%;}
nav ul.main_nav li.mnl a.mna::after {content:url("../img/common/header_menu_icon.svg"); display: inline-block; width:15px; margin-left:8px;}
nav ul.main_nav li.mnl a.mna.current::after {content:url("../img/common/header_menu_icon_current.svg");}
nav ul.main_nav li.mnl:nth-child(4) a.mna {background-color: var(--yellow);}
nav ul.main_nav li.mnl:nth-child(4) a.mna::after {content:none;}
nav ul.main_nav li.mnl a.mna img {display:none;}

nav ul.main_nav li.mnl a.mna span {font-size:15px; line-height:25px; font-weight:700; display:inline-block; border-bottom:2px solid #fff; transition: all 0.4s 0s ease;}
nav ul.main_nav li.mnl a.mna:hover span {border-bottom:2px solid var(--sky-blue); }
nav ul.main_nav li.mnl:nth-child(4) a.mna span {border-bottom:2px solid var(--yellow); color: var(--red-orange); }
nav ul.main_nav li.mnl:nth-child(4) a.mna:hover span {border-bottom:2px solid var(--red-orange); }
nav ul.main_nav li.mnl:nth-child(4) a.mna.current {background-color: var(--red-orange); }
nav ul.main_nav li.mnl:nth-child(4) a.mna.current span {border-bottom:2px solid var(--red-orange);color:#fff;}
nav ul.main_nav li.mnl:nth-child(4) a.mna.current:hover span {border-bottom:2px solid #fff; }

/* お葬式プランのサブメニュー */
nav ul.plan_sub_nav {display:none; display:flex; justify-content: center; width:100%; background:var(--sky-blue2);
  position:fixed; position: absolute; opacity:0; left:0;
  transition: opacity 0.2s 0s ease; visibility:hidden;
  background: linear-gradient(to bottom, #f5f5f5 1%, var(--sky-blue2) 95%, var(--sky-blue2) 100%); z-index:2;}
nav ul.plan_sub_nav li.psnl a.psna {display:block; padding:20px 20px; }
nav ul.plan_sub_nav li.psnl a.psna, 
nav ul.plan_sub_nav li.psnl a.psna span {font-size:16px; font-weight:700; line-height:16px; border-bottom:2px solid rgb(0,0,0,0);color:#727171; transition: all 0.4s 0s ease;}
nav ul.plan_sub_nav li.psnl a.psna span:hover {border-bottom:2px solid var(--red-orange);}
nav ul.plan_sub_nav li.psnl:nth-child(1) a.psna {color:var(--emerald-green2);}
nav ul.plan_sub_nav li.psnl:nth-child(1) a.psna span {color:var(--emerald-green2);}
nav ul.plan_sub_nav li.psnl:nth-child(1) a.psna::before {content:none;}

/* hoverで葬式プランを表示 */
nav ul.main_nav li.mnl.plan:hover ul.plan_sub_nav {opacity:1; visibility:visible;}

/* スマホ用メニュー */
aside.sp_menu {display:none; opacity:0;}

/* main */
main {height:auto;}

/* topへ戻るボタン */
#to_top {max-width:var(--base-width); width:100%; position: relative; margin:0 auto;}
#to_top img {cursor:pointer; position: absolute; max-width:50px; width:100%; top:-25px; right:0px; z-index:5;}

/* footer */

  /* footer フッターロゴ、フリーダイヤル */
  footer .inner {max-width:100%; }
  footer .inner .footer_content1  {width:100%; background: var(--emerald-green);}
  footer .inner .footer_content1 .inner {max-width:var(--base-width); width:100%; display: flex; align-items: center; padding:25px 0;}
  footer .inner .footer_content1 .inner .footer_logo {width: 50%;}
  footer .inner .footer_content1 .inner .footer_logo a {display: inline-block; max-width: 320px; width:100%;}
  footer .inner .footer_content1 .inner .footer_address {width:50%; text-align:right;}
  footer .inner .footer_content1 .inner .footer_address address {max-width:403px; width:100%; display:inline-block;}

  /* footer （年中無休・24時間対応・通話料無料）*/
  footer .inner .footer_content2 {max-width:var(--base-width); width:100%; margin:0px auto; padding:5px 0 10px 0; text-align:center; font-size:24px; line-height:26px; color:var(--red-orange); font-weight:700;}

  /* footer フッターメニュー */
  footer .inner .footer_content3 {width:100%; background: var(--emerald-green); }
  footer .inner .footer_content3 ul {margin:0px auto; justify-content: center; display:flex;}
  footer .inner .footer_content3 ul li {text-align:center;}
  footer .inner .footer_content3 ul li a {display:block; width:100%; padding:10px 10px 12px 10px; color:#fff; font-size:10px; line-height:27px;}
  footer .inner .footer_content3 ul li a::before {content:"▶"; display:inline-block; margin-right:10px;}
  footer .inner .footer_content3 ul li a span {color:#fff; font-size:14px; line-height:27px; border-bottom:1px solid #fff;}

  /* SP用 */
  footer .inner .footer_content3_2 {display:none;}

  /* footer 最下位部 */
  footer .inner .footer_content4 {width:100%; background-color:#f0f0f0;}
  footer .inner .footer_content4 * {font-size:10px; line-height:16px; color:#000;}
  footer .inner .footer_content4 .inner {max-width:var(--base-width); width:100%; display:flex; padding:15px 0;}
  footer .inner .footer_content4 .inner .l {flex-basis:50%;}
  footer .inner .footer_content4 .inner .l .ninsyo_syutoku {border-collapse: collapse;}
  footer .inner .footer_content4 .inner .l .cp {margin-top:20px;}

  footer .inner .footer_content4 .inner .r {flex-basis:50%; text-align:right;}
  footer .inner .footer_content4 .inner .r .mail {display:inline-block; width:228px;}
  footer .inner .footer_content4 .inner .r .free_dial {display:inline-block; width:228px; margin-top:2px; text-align:left;}


/* 調整 */
p.name-center {color:#fff}
p.name-center span {color:#fff;}


@media screen and (max-width : 800px ){
  header {border-bottom:2px solid var(--sky-blue); padding:10px 0; background:#fff; position:fixed; top:0; left:0;}
  header .inner {padding:0 10px;}
  header h1 {width:150px;}
  header div:nth-of-type(1) {flex-basis:calc(100% - 36px);}
  header div:nth-of-type(2) {display:none;}

  /* ヘッダーハンバーガーメニュー */
  header div:nth-of-type(3) {flex-basis:36px; display:block; cursor:pointer; height:27px; width:36px; position: relative; margin-right:10px;}
  header div:nth-of-type(3) span {display:block; position:absolute; width:36px; height:3px; background-color: #47ccbf; border-radius:5px;}
  header div:nth-of-type(3) span:nth-of-type(1) {top:0;}
  header div:nth-of-type(3) span:nth-of-type(2) {top:12px;}
  header div:nth-of-type(3) span:nth-of-type(3) {top:24px;}

  /* PC/SP兼用メニュー */
  nav {position:fixed; top:0; left:0;}
  nav ul.main_nav li.mnl a.mna span {font-size:14px;}
  nav ul.main_nav li.mnl a.mna::after {width:10px; margin-left:5px; display: none;}
  nav ul.main_nav li.mnl {flex-basis:33.3%;}
  nav ul.main_nav li.mnl.nagare {display:none;}
  nav ul.main_nav li.mnl a.mna img {display: block; padding:0px 0; width:25px; margin:0 auto;}
  nav ul.plan_sub_nav {display:none;}

  /* スマホ用メニュー */
  aside.sp_menu.open {display:block; width:100%; height:100%; position:fixed; top:0; left:0; background-color:#51bcb2; z-index:999;}
  aside.sp_menu div.close {text-align:right; padding:0 10px;}
  aside.sp_menu div.close span {color:#fff; font-size:50px; line-height:50px; font-weight: 100; cursor:pointer;}
  aside.sp_menu div.menu {height:50%; max-width:500px; width:100%; margin:0 auto; display: flex; align-items: center; }
  aside.sp_menu div.menu ul {padding:0px 30px; width:100%;}
  aside.sp_menu div.menu ul li {border-bottom:2px solid #fff; }
  aside.sp_menu div.menu ul li a {color:#fff; font-size:24px; line-height:24px; display:block; padding:30px 20px 20px 20px; box-sizing: border-box; position:relative;}
  aside.sp_menu div.menu ul li a::after {content:url("../img/common/sp_menu_left_arrow.svg"); display:inline-block; position:absolute; top:50%; right:25px; margin-top:-6px; width:10px;}
  aside.sp_menu div.img1 {padding:0px 30px; box-sizing: border-box; margin:30px auto 0 auto; max-width:500px; width:100%;}
  aside.sp_menu div.img2 {padding:0px 30px; box-sizing: border-box; margin:30px auto 0 auto; max-width:500px; width:100%;}
  
  /* フッター */
  footer .inner .footer_content1 .inner {flex-direction: column; padding:20px; display:none;}
  footer .inner .footer_content1 .inner .footer_logo {flex-basis:100%; text-align:center; }
  footer .inner .footer_content1 .inner .footer_address {flex-basis:100%; text-align:center; margin:30px 0 0 0;}

  footer .inner .footer_content2 {font-size:20px; padding:5px 0 5px 0; display:none;}

  footer .inner .footer_content3 {display:none;}
  footer .inner .footer_content3 ul {height:152px; padding:15px 0; box-sizing: content-box; flex-direction: column; flex-wrap: wrap; align-items:flex-start; align-content:flex-start; justify-content: flex-start;}
  footer .inner .footer_content3 ul li {text-align:left; width:150px;}
  footer .inner .footer_content3 ul li a:hover {opacity:0.7;}

  /* SP用 */
  footer .inner .footer_content3_2 {background-color: var(--emerald-green); padding:30px 30px 20px 30px; display:block;}
  footer .inner .footer_content3_2 div:nth-child(2){padding:10px 20px; color:#fff; border:2px solid #fff; font-size:calc(var(--min) * 14vw); line-height:calc(var(--min) * 14vw); margin:20px auto 0 auto; font-weight:700;border-left:0; border-right:0; text-align:center;}

  /* 最下位部 */
  footer .inner .footer_content4 .inner { flex-direction: column; padding:0 0 10px 0;}
  footer .inner .footer_content4 .inner .l {flex-basis:100%;order: 2;}
  footer .inner .footer_content4 .inner .l .ninsyo_syutoku {margin:20px auto;}
  footer .inner .footer_content4 .inner .l .ninsyo_syutoku td { font-size:calc(var(--min) * 10vw); padding:2px;}
  footer .inner .footer_content4 .inner .l .cp {text-align:center; font-size:calc(var(--min) * 10vw);}

  footer .inner .footer_content4 .inner .r {flex-basis:100%; order: 1; padding:0 10px 20px 10px; background-color: var(--emerald-green); }
  footer .inner .footer_content4 .inner .r .mail {width:100%; padding:0 50px; }
  footer .inner .footer_content4 .inner .r .free_dial { width:100%; padding:0 50px; margin-top:10px; font-size:calc(var(--min) * 10vw);}
}