@charset "utf-8";
/* CSS Document */

/*for #content new2020*/

/*追加リセット*/
h1,h2,h3,h4,h5,h6,p{ margin:0;padding:0; }
dl,dt,dd{ margin:0; padding:0; }
ul,ol,li{ margin:0; padding:0; }
li{ list-style:none; }
figure{ margin:0; padding:0; }

/*-1rem=10px-*/
html{ font-size:10px; }

/*=== common ===*/
/*font*/
body{
	font-size:16px; line-heigit:1.2;
	font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	}
@media screen and (min-width:767px){ 
  body{	line-heigit:1.4; }
}

/*font-size:16px 相対値
 4px:25% / 8px:50% / 10px:62.5% /
 12px:75% / 14px:87.5% / 16px:100% /
 18px:112.5% / 20px:125% / 24px:150% /
 32px:200% / 36px:225% / 40px:250% /
 44px 275% / 50px:312.5% / 56px:350% /
 60px:375% / 72px:450%
*/

a{ color:#0c3b91; text-decoration:none; }
a:hover{ color:#903; text-decoration:underline; }

/*レイアウトのためのdiv要素*/
#content div{ margin:0; padding:0; }

/*　↓リストスタイル↓　*/
#content li{ list-style-type:none; }

/*テーブル*/
#content table{ border-collapse:collapse; }
#content th{ white-space:nowrap; }

/*==汎用==*/
/*文字色：赤*/
.r{ color:#f00; }

/*　↓画像表示サイズ↓　*/
#content img{ width:auto; max-width:100%; height:auto; }

/*　↓画像を左寄せにする↓　*/
#content .img_left {
	float:left;
	margin:0 0.5em 0 0.5em;
}
 
/*　↓画像を右寄せにする↓　*/
#content .img_right {
	float:right;
	margin:0 0 0.5em 0.5em;
}

/*　↓float解除用「clearfix」↓　*/
#content .clearfix::after{/*for modern browser*/
	content:"";
	display:block;
	clear:both;
}

#content .clear{ clear:both; }

.txt_right{ text-align:right; }

/*===base layout & design===*/

/*-----ブレイクポイント------
・↓767px　スマホ,タブレット
・max-width:960px　PC
-----------------------------*/

body{ margin:0; padding:0; }
.container{ width:calc(100% - 2rem); margin:0 auto; position:relative; }

@media screen and (min-width:767px){
.container{ max-width:960px; }
}

/*ヘッダー*/
#head1{ display: flex; padding-top:2rem; flex-direction:column; }
#head1 h1{ text-align:center; }
#head1 h1 img{ width:60%; height: auto; }
#head2{ } 
#head2 p{ font-size:1em; line-height:1.2; margin-top:0.5rem; margin-bottom:1rem; color:#385b9a; font-weight:bold; }
#head2 > ul{ display: flex; justify-content:space-between; flex-wrap:nowrap; margin-bottom:1rem; }
#head2 > ul li{ width:calc(50% - 0.3rem); }
#head2 > ul li a{ display:block; white-space:nowrap; padding:0.5em 0; box-sizing:border-box;
  width:100%;
	background:#efefef; border:solid 2px #385b9a; text-align:center;
	color:#385b9a; font-weight:bold; text-decoration:none; }
#head2 > ul li a i{ margin-right:0.5em; font-size:1.5em; } /*fontawesome*/
#head2 > ul li a:hover{ background:#385b9a; color:#fff; border-color:#385b9a; }

@media screen and (min-width:767px){
  #head1{ flex-direction:row; justify-content:space-between; align-items: end; }  
  #head1 h1{ width:50%;max-width:450px; margin-top:1.25em; }
  #head1 h1 img{ width:100%; }
  #head2{ width:calc(50% - 30px); padding:0 1em; } 
  #head2 p{ font-size:1em; line-height:1.4; margin-top:0.5em; margin-bottom:1em; }
  #head2 > ul li{ width:calc(50% - 0.5em); }
  /*#head2 > ul li a:first-child{ margin-right:1em; }
#head2 > ul li:last-child{ margin-right:0; }*/
}

/*Google font icon*/
#head2 .material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
   margin-right:0.25em; font-size:1.75em;
   vertical-align:bottom;
}

/*グローバルメニュー*/
/*ハンバーガーメニュー*/
header{ position:relative; }
/*チェックボックス非表示*/
.nav-toggle { display:none; }
/*スマホ表示*/
@media screen and (max-width:767px) {
	/*ハンバーガーアイコン*/
.hgnav{ position:fixed; z-index:998; top:0; right:0; }
.btn-burger { cursor:pointer;
    display:block; width:4rem; height:4rem;
    position:relative; z-index:996; top:1rem; left:calc(100% - 5rem);
		background:#3a60a4;
  }
/*ハンバーガーアイコンを作る三本線*/
.icon,
.icon::before,
.icon::after { position: relative; /*right: 0; left: 0; bottom: 0;*/
    height: 2px; /*線の太さ*/
    width: 3rem; /*線の長さ*/
    background-color:#fff;
    border-radius:2px;
    display:block; cursor: pointer; margin: auto; }
/*三本線の間隔*/
.icon{ top: calc(2rem - 1px); }
.icon::before { top:-1rem; content:""; }
.icon::after { top:calc(1rem - 2px); content:""; }

/*アイコンをクリックしたら*/
.nav-toggle:checked ~ .btn-burger .icon {
    background: transparent;
}
.nav-toggle:checked ~ .btn-burger .icon:before {
    top:0;
    transform: rotate(-45deg);
}
.nav-toggle:checked ~ .btn-burger .icon:after {
    top:-2px;
    transform: rotate(45deg);
}
.icon,
.icon:before,
.icon:after { transition: all .6s; }
  
/*メニュー表示　左から
nav{ position:relative; top:1rem; left:-100%; z-index:110; }
nav ul{ position:relative; padding:1rem; background-color:rgba(58,96,164,0.8); }
nav ul li a{ position:relative; top:0; width:14em }
nav ul{ display: none; margin: 0; }
nav ul li{ margin-bottom:0.25em; }
.nav-toggle:checked ~ nav{ left:calc(100% - 14em - 3rem); transition: all 1.5s; }
.nav-toggle:checked ~ nav ul { display: block; }
*/
  
/*メニュー表示　上から*/
nav{ position:relative; top:-50vh; left:calc(100% - 14em - 3rem); z-index:110; }
nav ul{ position:relative; padding:1rem; background-color:rgba(58,96,164,0.8); }
nav ul li a{ position:relative; top:0; width:14em }
nav ul{ display: none; margin: 0; }
nav ul li{ margin-bottom:0.25em; }
.nav-toggle:checked ~ nav{ top:1rem; transition: all 1.0s; }
.nav-toggle:checked ~ nav ul { display: block; }
}

} /*SP*/

/*---PC表示---*/
@media screen and (min-width:767px) {	
  /*ハンバーガーメニュー解除*/
	div.hgnav{ margin:0; padding:0; }
	.btn-burger{ display:none; visibility:hidden; }
	.nav-toggle:checked ~ .nav .nav-list{ display:none; visibility:hidden; }	
	nav{ background:none; }
	} /*PC*/

nav > ul{ }
nav > ul li{ background:#fff; }
nav > ul li a{ display:block; box-sizing:border-box; padding:0.5em; height:100%;
    border-style:solid; border-width:1px; 
    text-align:center; color:#fff; font-weight:bold;}
nav#navi > ul li a:hover{ color:#fff; text-decoration:none; }

/*nav color*/
nav > ul li.menu1 a{ color:#ea668c; border-color:#ea668c; }
nav > ul li.menu1 a:hover{  background:#ea668c; }
nav > ul li.menu2 a{ color:#f08802; border-color:#f08802; }
nav > ul li.menu2 a:hover{ background:#f08802;  }
nav > ul li.menu3 a{ color:#3393d1; border-color:#3393d1; }
nav > ul li.menu3 a:hover{ background:#3393d1; } 
nav > ul li.menu4 a{ color:#f4d21f; border-color:#f4d21f; padding:0.5em; }
nav > ul li.menu4 a:hover{ background:#f4d21f; }
nav > ul li.menu5 a{ color:#83519C; border-color:#83519C; }
nav > ul li.menu5 a:hover{ background:#83519C; }

@media screen and (min-width:767px){
  nav > ul{ display: flex;justify-content:space-between; }
  nav > ul li{ width:calc(100% / 5); height:3em; line-height:1.1; }
  nav > ul li a{ padding:1em 0.5em; border-width:2px; font-size:1em; }
  nav > ul li a span{ display:inline-block; }
  /*nav color*/
  nav#navi > ul li a:hover{ background:#fff; }
  nav > ul li.menu1 a{ color:#fff; background:#ea668c; border-color:#ea668c; }
  nav#navi > ul li.menu1 a:hover{ color:#fff; color:#ea668c; }
  nav > ul li.menu2 a{ color:#fff; background:#f08802; border-color:#f08802; }
  nav#navi > ul li.menu2 a:hover{  color:#fff;color:#f08802; }
  nav > ul li.menu3 a{ color:#fff; background:#3393d1; border-color:#3393d1; }
  nav#navi > ul li.menu3 a:hover{ color:#3393d1; } 
  nav > ul li.menu4 a{ color:#fff; background:#f4d21f; border-color:#f4d21f; padding:0.5em; }/*#8ab929*/
  nav#navi > ul li.menu4 a:hover{ color:#f4d21f; }
  nav > ul li.menu5 a{ color:#fff; background:#83519C; border-color:#83519C; }
  nav#navi > ul li.menu5 a:hover{ color:#83519C; }
}
@media screen and (min-width:900px){
  nav > ul li{ height:3.5em; }
  nav > ul li a{ font-size:1.125em; }
}

/*フッダー*/
footer{ border-top:1px solid #0c3b91; background:#bbd3e4; padding-top:1em; margin-top:1rem; }
#foot1{ background:#0c3b91; padding:0.5em 0 9em; }
#foot2{ margin:0 auto; padding:0; color:#fff;}

#foot2 ul{ display: flex;font-size:1.4rem; flex-direction:row; flex-wrap:wrap; }
#foot2 ul li::before{ content:"\025B6"; margin-right:0.25em;}
#foot2 ul li { margin-right:0.75em;}
#foot2 ul li:last-child{ margin-right:0em; }
#foot2 ul li a{ color:#fff; white-space:nowrap; }
#foot2 > p{ margin-top:1em; text-align:right; font-size:clamp(12px, 1.46vw, 14px); }

/*誘導バナー固定*/
#guide{ position:fixed; z-index:999; bottom:0; width:100%; margin:auto; background:rgba(239,239,239,0.8); }
#guide a:hover{ text-decoration:none; }
#guide::after{ content:""; height:0; visibility:hidden; clear:both; }

/*ページTOPへボタン -onlyPC-*/
#guide p{ display:none; }
@media screen and (min-width:767px){
    #guide p { display:block; width:3.25em; position:relative; bottom:4em; left:calc((100% - 60em) / 2 + 60.5em); float:left; }
    #guide p a{ display:block; width:100%; box-sizing:content-box; padding:0.5em 0.25em; background:rgba(159,159,159,0.6);
      border-radius:100%; color:#fff; text-align:center; line-height:1.2; }
    #guide p a {  }
    #guide p a:hover{ background:rgba(239,239,239,0.8); color:#999; }
    #guide p a span.material-symbols-outlined {
      font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24;
      vertical-align:bottom;
    }
}
/*誘導バナー*/
#guide .container{ }
#guide .container ul{ display: flex;justify-content:center; flex-direction:column; margin-bottom:1em; }
#guide .container ul li{ width:80%; margin:1em auto 0 auto; }/*1バナー=24em;3バナー=18em*/
#guide .container ul li a{ display:block; width:100%; padding:0.25em 0; text-align:center; color:#fff; font-weight:bold; }
#guide .container ul li a{ background:#3a98bf; border:solid 1px #3a98bf;  }
#guide .container ul li a:hover{ color:#3a98bf; background:#fff; }

/*#guide .container ul li a i{ margin-right:0.5em; font-size:1.5em; }*/
#guide .container ul li a span.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  vertical-align:bottom;
  margin-right:0.25em; font-size:1.75em;
}

@media screen and (min-width:767px){
  #guide .container ul{ flex-direction:row; margin-bottom:2em; }
  #guide .container ul li{ width:24em; margin:2em auto 0; }/*1バナー=24em;3バナー=18em*/
  #guide .container ul li a{ padding:1em 0; font-size:1.125em; }  
}

/*誘導バナーは印刷非表示*/
@media print{
    #guide{
        display: none;
    }
}

/*=== content layout & design ===*/
/*パンくずナビ*/
#pan{ margin:0; padding:0; }
#pan li{ display:inline-block; font-size:0.875em; }
#pan li::after{ content:">"; margin:0 1em; }
#pan li:last-child::after{ content:none; margin:0;}
#pan li a{ text-decoration:none; }

@media screen and (min-width:767px){ #pan{ margin:1em; } }

/*コンテンツヘッダー*/
#contenthead{ padding:10px 0; background:none; 
  border-bottom-width:5px; border-bottom-style:solid;
	 }
#contenthead h2{ text-align:center; }
@media screen and (min-width:767px){
  #contenthead{ padding:50px 0 10px; margin-bottom:0.5em;
	background-repeat:no-repeat; background-position:bottom right;
	}
  #contenthead h2{ text-align:left; }
}

/*フレックスボックス設定（sidemenu&右カラム）*/
#main{ display: flex;flex-direction:column-reverse; }
@media screen and (min-width:767px){
  #main{ flex-direction:row; }
}

/*side menu*/
.sidemenu { width:100%; }
.sidemenu > ul{ display:flex; flex-direcition:row; flex-wrap:wrap; justify-content:space-between; align-items:stretch;
  padding:0; padding-bottom:0.0625em; margin:0; }
.sidemenu > ul > li{ width:calc(50% - 2px); margin-bottom:4px;}
.sidemenu > ul > li > a{ display:block; 
	width:100%; height:100%; padding:0.75em 0; text-align:center;
	color:#663440; font-size:0.875em; font-weight:bold; line-height:1.2; text-decoration:none; }	

/*サイドメニューマウスオーバー時*/
#content .sidemenu > ul > li > a:hover{ background:#fff8bf; color:#1c1f87; }

/*サイドメニュー　子メニュー スマホ非表示*/
#content .sidemenu ul li ul.under { display:none; visibility:hidden; }

@media screen and (min-width:767px){
  .sidemenu { width:12.6875em; }
  .sidemenu >ul{ flex-direction:column; flex-wrap:nowrap;
    padding:0; padding-bottom:0.0625em; margin:0; }
  .sidemenu > ul > li{ width:100%; }
  .sidemenu li span{ display:inline-block; }
  .sidemenu > ul > li > a{ padding:0.75em 1em 0.75em 1.5em; text-align:left; }	
  
  /*サイドメニュー　子メニュー表示*/
  #content .sidemenu ul li ul.under{ display:block; visibility:visible; 
    margin-bottom:0.25em; padding:0.5em 0.5em 0; }
  #content .sidemenu ul li ul.under li{ margin-left:1em; text-indent:-1em; }
  #content .sidemenu ul li ul.under li a{ display:block; 
    width:100%; padding:0; background:none; 
    color:#663440; font-size:0.875em; font-weight:normal; line-height:1.2; text-decoration:none; }
  #content .sidemenu ul li ul.under li a::before{ content:"├";}
  #content .sidemenu ul li ul.under li:last-child a::before{ content:"└";}
  #content .sidemenu ul li ul.under li a:hover{ text-decoration:underline; color:#1c1f87; }
  .sidemenu ul.under li span{ margin-left:1em; }
}

/*==メインコンテンツ 共通==*/
#maincontent{ flex:1 1 auto; width:100%; padding:0.5rem 1rem 1rem; box-sizing:border-box; }
@media screen and (min-width:767px){
  #maincontent{ width:calc(100% - 12.6875em); padding:1.5em 1em; }  
}
/*ページ見出し*/
#maincontent h3{ margin:0; padding:0.5rem 0;
	text-align:center; font-size:clamp(1.125em, calc(100vw / 18), 2em);	line-height:1.2;
	text-shadow:0 3px 3px #ccc;
	border-bottom-style:double;	border-bottom-width:5px;	
}
#maincontent h3 span{ display:inline-block; }
@media screen and (min-width:767px){
  #maincontent h3{ padding:0.32em; }	
  #maincontent h3 span::before{ content:"　"; }
}
/*各カテゴリtop（index）スマホH3非表示*/
#maincontent h3.catetoph3{ display:none; }
@media screen and (min-width:767px){
  #maincontent h3.catetoph3{ display:block; }
}

#maincontent h3 + p.catch{ font-size:1em; margin:0.5rem 0; text-align:center; }
#maincontent h3 + p.catch span{ display:inline-block; font-size:1em; }
@media screen and (min-width:767px){
  #maincontent h3 + p.catch{ font-size:1.25em; }
  #maincontent h3 + p.catch span{ font-size:1em; }
}

/*article共通設定*/
#maincontent article{ margin:1rem 0 1.5rem; }

/*直下article設定*/
#maincontent > article{ margin-bottom:0; }

/*article直下H4設定*/
#maincontent article > h4{ font-size:1.125em; margin-top:1em; }
#maincontent article > h4 span{ color:#999; font-size:0.89em; font-weight:normal; }
#maincontent article > h4::before{ content:"■ ";}

/*article直下H5設定*/
#maincontent > article > h5{ margin:1em 0 0.5em; padding:0.25em 0.5em;
	font-weight:normal; color:#333;
	border-top-style:solid; border-top-width:1px; 
	border-bottom-style:double; border-bottom-width:3px; }

/*aside共通設定*/
#maincontent aside{ border-style:solid; border-width:1px; padding:1rem; margin-top:1rem; }
#maincontent aside + p{ margin-top:1rem; }

/*aside直下H4設定*/
#maincontent aside > h4{ border-bottom-style:dashed; border-bottom-width:1px; text-align:center;
	padding-bottom:0.5rem; margin-bottom:0.5rem; }
	
#maincontent h5{ font-size:1em; }

@media screen and (min-width:767px){
  #maincontent article{ margin:2em 0 1.5em; }  
  #maincontent aside{ padding:1em; }
  #maincontent aside + p{ margin-top:1em; }
  #maincontent aside > h4{ padding-bottom:0.5em; margin-bottom:0.5em; }
  /*H4+本文　PCのみ下げる*/
  #maincontent article > h4 + p{ margin-left:1.6875em; margin-right:1em; }
}
	
/*==お問合せ→ユーザPへ誘導==*/
p.button a{ display:block; color:#fff; font-weight:bold; }
p.button a:hover{ color:#036eb8; text-decoration:none; }
p.button{
  margin:1rem auto;
  border-radius:0.5rem;
  font-size:1em;  
  display: block;
  max-width:22em;
  min-height:3em;
  text-align: center;
  text-decoration: none;
  line-height: 3em;
  outline: none;
}
p.button::before,
p.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
  border-radius:0.5rem;
}

p.button,
p.button::before,
p.button::after {
  box-sizing: border-box;  
  transition: all .3s;
}

.button {
  position: relative;
  z-index: 2;
  background-color: #036eb8;
  border: 2px solid #036eb8;
  color: #fff;
  line-height: 50px;
}
.button:hover {
  background-color: #fccad2;
  border-color: #036eb8;
  color: #036eb8;
}
.button::before,
.button::after {
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #036eb8;
}
.button::before {
  right: 0;
}
.button::after {
  left: 0;
}
.button:hover::before,
.button:hover::after {
  width: 0;
  background-color: #fff;
}

@media screen and (min-width:767px){
   p.button{
     margin:1em auto;
     font-size:1.25em;
  } 
}


/*linkの後に"＞＞＞""*/
p.link a::after{ content:">>>"; }

/*==お問合せ→フリーコール案内==*/
p.call{ color:#f00; font-size:2em; font-weight:bold; text-align:center; margin-top:1em; }

/*==メインコンテンツ　汎用==*/
/*テーブル*/
#maincontent th,#maincontent td{ padding:0.5em; line-height:1.6; }

/*figure配置：画像中央&caption左寄せ*/
#maincontent figure{ text-align:center; }
#maincontent figure figcaption{ text-align:left; }

/*リンクテキスト右寄せ＆記号*/
p.link{ margin-top:1.5em; text-align:right; }
p.link + p.link{ margin-top:0.5em; }

/*上付き、下付き*/
#maincontent sub,#maincontent sup{ font-size:0.625em;}

/*注意書き*/
#maincontent .tyu{ font-size:0.75em; }
#maincontent .tyu::before{ content:"※ "}

/*注意書き ※+No+_*/
#maincontent .tyub{ font-size:0.75em; margin-left:3em; text-indent:-2em; }
#maincontent .tyub::before{ content:"※"}

/*金額表示*/
#maincontent .price span{ font-size:1.25em; font-weight:bold; color:#f00; }
#maincontent td.price{ text-align:right; white-space:nowrap; }

/*●●現在の価格+「不課税」*/
p.kakakunow{ padding:0.25em 0.5em; border:solid 1px #eee; font-size:0.875em; margin-bottom:1rem; }
p.kakakunow span{ font-size:0.785em; }

/*==【共通】開通までの流れ==*/
/*新規申込ボタン*/
.toapply p{ font-size:1.25em; font-weight:bold; }
.toapply p a{ display:inline-block; position:relative; z-index:2;
	box-sizing:content-box;
	width:12em; height:100%; text-align:center;
	margin:1em 2em; padding:1em 2em; border-radius:0.5em;
	color:#fff; text-shadow:1px 1px 2px #333;	
	border-style:solid; border-width:2px;}
.toapply p a::before, .toapply p a::after{ 
	position:absolute; z-index:-1;
	display:block;
	content:'';
	top:0;
	width:50%;
	height:100%;
	box-sizing:border-box; transition:all .8s;}
.toapply p a::before{ right:0;}
.toapply p a::after{ left:0;}
.toapply p a:hover{ background:#ffc; text-shadow:none; text-decoration:none; }
.toapply p a:hover::before, .toapply p a:hover::after{ width:0; }	

/*開通STEP*/
.step > section{ display: flex; justify-content:flex-start; width:calc(100% - 2px);
	padding:0; margin-bottom:3em;
	border-style:solid; border-width:1px;
	position:relative; }
.step section::after{ content:""; display:block; width:0; height:0;
	border:solid 1.5em transparent;
	position:absolute; top:calc(100% + 0.25em); left:1em;
}
.step section:last-child::after{ border:none; }
	
.step > section p.stepno,.step > section h5,.step > section p.exp{ padding:0.5em; box-sizing:border-box; }
.step > section p.stepno{ width:5em; text-align:center; color:#fff; }
.step > section h5{ width:calc(7em + 1px); text-align:center; border-right-style:solid; border-right-width:1px; }
.step > section p.exp{ width:calc(100% - 5em - 7em - 1px); }