@charset "UTF-8";

body {margin: 0;
    font-family: 'M PLUS Rounded 1c', sans-serif;}
    
body{
  background-color: #fff;
  background-color   : #ffffff;
  background-image   : radial-gradient(#ffff1a 16%, transparent 21%),
                       radial-gradient(#ffff1a 16%, transparent 21%);
  background-position: 0 0, 4px 4px;
  background-size    : 8px 8px;
}

body,h1,h2,h3,ul,li,a,p  {color: #225966}


/* ナビゲーションメニュー */
.menu   {position: sticky;
        position: -webkit-sticky;
        bottom:0;
        z-index:2}

.menu    {margin: 0;
            padding: 0;
            list-style: none;
            background-color: #FFF799;}
            
            
.menu a  {display: flex;
  justify-content: center;
  align-items: center;
            padding: 20px;
            color: #225966;
            font-size: 14px;
            font-weight: bold;
            text-decoration: none;
            text-align: center;
            border: 1px solid #225966;
            border-top: 2px solid #225966;
            border-bottom: 2px solid #225966;}
            
.menu a:hover    {background-color: #FCEB4F}

/* ヘッダー画像 */
.header-pc    {width: 100%;
            vertical-align: bottom}
.header-sp    {width: 100%;
            vertical-align: bottom}
            
.header-pc { display: block !important; }
.header-sp { display: none !important; }

/* イントロ */

.hogosya-illust {margin: 0;
                padding: 0;
                background-color: #fff}
.hogosya-pc    {width: 100%;
            vertical-align: bottom}
.hogosya-sp    {width: 100%;
            vertical-align: bottom}
.hogosya-pc { display: block !important; }
.hogosya-sp { display: none !important; }

.intro-illust-pc { display: block !important; }
.intro-illust-sp { display: none !important; }
.hogosya-p    {margin: 0;
            padding-top: 50px;
            text-align: center;
            font-weight: bold;
            font-size: 26px;
            color: #225966;
            line-height: 2em}
            
.intro-p    {margin: 100px 0;
            padding: 0;
            text-align: center;
            font-weight: bold;
            font-size: 26px;
            color: #225966;
            line-height: 2em}
            
.intro-p02    {margin:0;
            padding: 30px 0;
            text-align: center;
            font-weight: bold;
            font-size: 26px;
            color: #225966;
            line-height: 2em;
            background-color: #fff799}
            
.intro-p03    {margin: 0;
            padding-top: 50px;
            text-align: center;
            font-weight: bold;
            font-size: 26px;
            color: #225966;
            line-height: 2em}
            
.intro-p04    {margin: 20px;
            padding: 50px;
            text-align: center;
            font-weight: bold;
            font-size: 26px;
            color: #225966;
            line-height: 2em}
            
/* 補償内容 */
.hosyou-illust-pc { display: block !important; }
.hosyou-illust-sp { display: none !important; }


.hosyou {margin: 0;
        padding: 50px;
        background-color:#A2E288; }
        
.hosyou-all    {margin: 50px 100px;
                padding: 50px;
                border: solid 2px #225966;
    background-color: #fff;
  background-color   : #ffffff;
  background-image   : radial-gradient(#ffff1a 16%, transparent 21%),
                       radial-gradient(#ffff1a 16%, transparent 21%);
  background-position: 0 0, 4px 4px;
  background-size    : 8px 8px;
  text-align: center}
        
.hosyou-box {margin: 20px 0;
            padding: 0;
            background-color: #fff;
            border-radius: 20px}
            
.hosyou-illust  {margin: 0;
                padding: 30px 0 30px 30px;
                width: 80%;}
.hosyou-p   {margin: 0;
            padding: 20px 0;
            font-size: 20px;
            text-align: left;
            font-weight: bold}
.plus   {margin: auto;
        padding: 50px;
        width: 20%;
        text-align: center}
        
.balloon-shadow-line {
  position: relative; /* 三角の位置を固定するために設定 */
  width: 600px; /* 幅 */
  margin: 0 0 40px; /* 上 左右 下のマージン */
  padding: 20px; /* ふきだし内の余白 */
  background: #fff; /* 背景色 */
  border: 3px solid #225966;
  text-align: center; /* テキストの揃え */
  box-shadow: 3px 3px  #225966;
  font-size: 26px;
  font-weight: bold;
}
.balloon-shadow-line::before,
.balloon-shadow-line::after {
  content: '';
  width: 20px; /* 影をつけるために線幅で設定せずにboxを使用する */
  height: 20px;
  transform: rotate(45deg);
  position: absolute;
  left: 20%;
  margin-left: -10px;
}
.balloon-shadow-line::before {
  background: #225966; /* 吹き出しの線と同じ色 */
  bottom: -10px;
  box-shadow: 3px 3px #225966;
}
.balloon-shadow-line::after {
  background: #fff; /* 吹き出しの地と同じ色 */
  bottom: -9px; /* 線の太さだけずらす */
}

            
.hosyou-title   {font-size: 26px}

                
.hosyou-illust img  {width: 100%}
       

/* プラン表 */
.p-slide    {visibility:hidden}
.plan-main table    {width: 100%;
                    margin: 0;
                    padding: 100px 0;
                    border: solid 2px #225966;
                    border-collapse: collapse}
                    
.plan-main td   {border: solid 2px #225966;
                padding: 30px;
                line-height: 1.5em}
                
.table-title01    {background-color: #A2E288;
                color: #225966;
                text-align: center;
                font-weight: 500;
                line-height: 2em;
                text-align: left;
                font-size:24px}
.table-title02    {background-color: #FFF;
                color: #225966;
                text-align: center;
                font-weight: 500;
                line-height: 2em;
                text-align: left;
                font-size:24px}
                
.plan-name01  {background-color: #A2E288;
                color: #FFF799;
    -webkit-text-stroke:2px #225966;
    font-weight: bold;
    font-size: 30px;
    text-align: center;}

.plan-name02  {background-color: #A2E288;
                color: #FFF799;
    -webkit-text-stroke:2px #225966;
    font-weight: bold;
    font-size: 30px;
    text-align: center;}
                
.table01   {background-color: #fff;
            font-size: 24px;
            text-align: center}
.table02   {background-color: #A2E288;
            color: #FFF799;
    -webkit-text-stroke:2px #225966;
    font-weight: bold;
    font-size: 24px;
    text-align: center;}
.table03   {background-color: #fff;
            font-size: 24px;
            text-align: left}
    
.t-table    {
    color: #FFF799;
    -webkit-text-stroke:2px #225966;
    font-weight: bold;
    font-size: 40px;
    text-align: center;}
.t-table02  {font-size: 46px}
                
.btn01  {margin: 0;
        padding: 0;
        text-align: center}
.btn02  {margin: 0;
        padding: 0;
        text-align: center}
        
/* 料金シミュレーション */
.ryoukinhyou-illust-pc { display: block !important; }
.ryoukinhyou-illust-sp { display: none !important; }

.ryoukinhyou-illust-pc  {margin: 0;
                        padding: 20px 0}
.ryoukinhyou-illust-sp  {margin: 0;
                        padding: 20px 0}


/* よくある質問 */
.q-a {margin: 100px 0;
        padding: 100px 0;
        text-align: center;
        background-color: #fff;
        border: solid 2px #225966}
        
.q-a img    {width: 100%;
            vertical-align: bottom}
        
/*---------------------------------
アコーディオンボックス
--------------------------------*/
.acbox{
  width: auto;
  font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */
  margin:40px 200px; /* ボックス全体の位置調整 */
}

.acbox label{
  width: auto;
  font-size: 16px; /* ラベルの文字サイズ */
  font-weight: bold;
  text-align: left;
  background: #a2e288; /* ラベルの背景色 */
  position: relative;
  display: block;
  padding:20px;
  cursor: pointer;
  color: #225966;
}

.acbox label:hover{
  background: #77ce4e; /* ラベルにマウスを乗せた時の背景色 */
}

.acbox input{
  display: none;
}

.acbox label:after{
  color: #225966;
  content:"▼"; /* ラベルのアイコン */
  position: absolute;
  top: 50%;
  right: 30px;
  margin-top: -10px;
}

.acbox input:checked ~ label::after {
  content:"▲"; /* ラベルをクリックした後のアイコン */
}

.acbox div{
  height: 0px;
  overflow: hidden;
  opacity: 0;
  transition: 0.15s; /* 開閉スピードの設定 */
}

.acbox input:checked ~ div{
  height: auto;
  padding: 20px; /* 開いた部分の枠内の余白 */
  border-radius: 0px;
  background: #fff; /* 開いた部分の背景色 */
  border: solid 3px #77ce4e;
  opacity: 1;
}

.acbox input:checked ~ label {
  background: #77ce4e; /* クリック後のラベルの背景色 */
}

.acbox-under{
  font-size: 15px;/* 開いた部分の文字サイズ */
  text-align: left;
  color: #225966; /* 開いた部分の文字色 */
}
        
/* お問い合わせ */
.otoiawase  {margin: 0;
            padding: 100px 0;
            background-color: #fff799;
            text-align: center}
            
.otoiawase p    {margin: 20px 0;
                padding: 0;
                font-size: 30px;
                font-weight: 500;}
            
.otoiawase img {width: 30%}

.panf   {margin: 0;
        padding: 30px 0;
        width: 100%}
        
.panf img   {width: 30%}

/* コピーライト */
.copyright  {background-color: #fff799;
            text-align: center}

.copyright p	{margin: 0;
                padding: 10px;
                color: #3b3d3f;
                font-size: 14px;}
                

/* 文字エフェクト */
.t-yellow   {background:linear-gradient(transparent 60%, #FFF799 60%);}
.t-red   {background:linear-gradient(transparent 60%, #f76d8e 60%);}
.t-big01    {font-size: 52px}
.t-strong   {font-size: 40px}


/* ボタン関連共通CSS */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;/*rem算出をしやすくするために*/
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #225966;
  border-radius: 0.5rem;
}
/* お申込みボタン */
.btn-border {margin: 50px 0;
            padding: 0;
            }

a.btn-border {
    padding: 20px 100px;
  border: 2px solid #225966;
  border-radius: 0;
  background: #a2e288;
  -webkit-box-shadow: 10px 10px 0 #225966;
  box-shadow: 10px 10px 0 #225966;
  font-size: 30px
}

a.btn-border:hover {
  -webkit-box-shadow: -10px -10px 0 #225966;
  box-shadow: -10px -10px 0 #225966;
}

/* 保険が適用されるかなボタン */
.btn-border02 {margin: 10px 0 100px 0;
            padding: 0;
            }

a.btn-border02 {
    padding: 20px 35px;
  border: 2px solid #225966;
  border-radius: 0;
  background: #FFF799;
  -webkit-box-shadow: 10px 10px 0 #225966;
  box-shadow: 10px 10px 0 #225966;
  font-size: 30px
}

a.btn-border02:hover {
  -webkit-box-shadow: -10px -10px 0 #225966;
  box-shadow: -10px -10px 0 #225966;
}

.tekiyo-small   {font-size: 20px}

/* 見出し */
.midashi01{margin: 60px;
    padding: 10px;
    box-shadow: 5px 10px 0 #225966;
    border: 2px solid #225966;
    color: #FFF799;
    -webkit-text-stroke:2px #225966;
    font-weight: bold;
    font-size: 50px;
    text-align: center;
    background-color: #fff}

.midashi02{margin: 100px 200px;
    padding: 10px;
    box-shadow: 5px 10px 0 #225966;
    border: 2px solid #225966;
    color: #FFF799;
    -webkit-text-stroke:2px #225966;
    font-weight: bold;
    font-size: 50px;
    text-align: center;
    background-color: #A2E288}

/* トップボタン */
html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 80px;
    width: 80px;
    position: fixed;
    right: 30px;
    bottom: 80px;
    background: #A2E288;
    border: solid 3px #225966;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #225966;
    border-right: 3px solid #225966;
    transform: translateY(20%) rotate(-45deg);
}
    
/* グリッド */
body    {display: grid;
        grid-template-columns: [left] minmax(20px, 1fr) [main] minmax(auto, 1280px)[main-end] minmax(20px, 1fr) [right];
        grid-template-rows: [headimg] auto [intro] auto [hosyou] auto [plan] auto[q-a] auto[otoiawase] auto[foot] auto[bottom]}
 


.header-pc    {grid-column-start: left;
            grid-column-end: right;
        grid-row-start: headimg;}
        
.header-sp    {grid-column-start: left;
            grid-column-end: right;
            grid-row-start: headimg;}
            
.intro    {grid-column-start: left;
            grid-column-end: right;
            grid-row-start: intro;}
            
.hosyou    {grid-column-start: left;
            grid-column-end: right;
            grid-row-start: hosyou;}
            
.hosyou-box {
            display: grid;
            grid-template-columns:1fr 3fr;
            grid-template-rows: auto;
            grid-column-gap: 10px;
            grid-row-gap: 10px}
            
.plan    {grid-column-start: main;
            grid-row-start: plan;}

            
.q-a {grid-column-start: main;
            grid-row-start: q-a;}
            
.otoiawase {grid-column-start: left;
            grid-column-end: right;
            grid-row-start: otoiawase;}
            
.copyright  {grid-column-start: left;
            grid-column-end: right;
            grid-row-start: foot}
            
.menu  {grid-column-start: left;
        grid-column-end: right;
        grid-row-start: footer-menu;}   
            
.menu       {display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows: auto;
            grid-row-gap:0}
            

            
/* ########################### 1179px以下 ##############################*/
@media (max-width: 1179px) {

.menu a  {padding: 10px;
            font-size: 12px}

/* お問合せ */
.otoiawase  {margin: 0;
            padding: 100px;}
            
/* q-a */
.acbox{
  width: auto;
  font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */
  margin:40px 100px; /* ボックス全体の位置調整 */
}

}
/* ########################### 767px以下 ##############################*/
@media (max-width: 767px) {

.menu   {grid-template-columns: 1fr 1fr;}
.menu a  {padding: 30px;
            font-size: 50px;
            border-bottom: 1px}

.intro  {margin: 0;
        padding: 10px 30px}
.intro p    {font-size: 50px;
            line-height: 2em;}
.intro-p02  {padding: 40px 0}
.intro-p03 p  {font-size: 80px;
        text-align: center;
        font-weight: 500;
        line-height: 1.8em}

.t-strong   {font-size: 80px}
            

.header-pc { display: none !important; }
.header-sp { display: block !important; }

.hogosya-pc { display: none !important; }
.hogosya-sp { display: block !important; }


.intro-illust-pc { display: none !important; }
.intro-illust-sp { display: block !important; }

.hosyou-illust-pc { display: none !important; }
.hosyou-illust-sp { display: block !important; }

.plan   {margin: 50px 0;
        padding: 50px 0}
.p-slide    {visibility:visible;
            font-size: 50px;
            font-weight: 500;
            text-align: left}
.hosyou-all    {margin: 0;
                padding: 50px;} 
.hosyou-illust  {margin: auto;
                padding: 0;
                width: 70%;}
.hosyou-title   {font-size: 100px}
.hosyou-p   {margin: 0;
            padding: 20px;
            font-size: 60px;
            text-align: left;
            font-weight: bold}
.hosyou-box {
            display: grid;
            grid-template-columns:1fr;
            grid-template-rows: auto;
            grid-row-gap: 100px;
            padding: 50px 0}
            
.plus   {width: 30%}
.balloon-shadow-line    {margin: 50px 0;
                        font-size: 80px;
                        width: 1100px;
                        box-shadow: 20px 20px;
                        text-align: left}
.balloon-shadow-line::before,
.balloon-shadow-line::after {
  content: '';
  width: 30px; /* 影をつけるために線幅で設定せずにboxを使用する */
  height: 30px;
  transform: rotate(45deg);
  position: absolute;
  left: 20%;
  margin-left: -10px;
  bottom:-5%;
}
.balloon-shadow-line::before {
  background: #225966; /* 吹き出しの線と同じ色 */
  bottom: -30px;
  box-shadow: 3px 3px #225966;
}

.ryoukinhyou-illust-pc { display: none !important; }
.ryoukinhyou-illust-sp { display: block !important; }
     
.table-title01  {font-size: 60px}
     
.q-a  {grid-column-start: left;
       grid-column-end: right;
       padding: 20px 0 0 0 ;}
       
.otoiawase  {grid-column-start: left;
       grid-column-end: right;
       padding: 20px 0 0 0 ;}
       
.otoiawase img  {width: 90%}

.otoiawase p    {font-size: 18px}

.copyright  {grid-column-start: left;
       grid-column-end: right;
       padding: 20px 0 0 0 ;}
       

                
/* 料金表 */
.ryoukin-wrap {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            grid-row-gap: 20px}
            
.ryoukin-box {
            padding: 10px;}
            
.table-title01    {background-color: #A2E288;
                color: #225966;
                text-align: center;
                font-weight: 500;
                line-height: 2em;
                text-align: left;
                font-size:70px}
.table-title02    {background-color: #FFF;
                color: #225966;
                text-align: center;
                font-weight: 500;
                line-height: 2em;
                text-align: left;
                font-size:70px}
                
.plan-name01  {background-color: #A2E288;
                color: #FFF799;
    -webkit-text-stroke:4px #225966;
    font-weight: bold;
    font-size: 80px;
    text-align: center;}

.plan-name02  {background-color: #A2E288;
                color: #FFF799;
    -webkit-text-stroke:4px #225966;
    font-weight: bold;
    font-size: 80px;
    text-align: center;}
                
.table01   {background-color: #fff;
            font-size: 80px;
            text-align: center}
.table02   {background-color: #A2E288;
            color: #FFF799;
    -webkit-text-stroke:4px #225966;
    font-weight: bold;
    font-size: 50px;
    text-align: center;}
.table03   {background-color: #fff;
            font-size: 40px;
            text-align: left}
    
.t-table    {
    color: #FFF799;
    -webkit-text-stroke:4px #225966;
    font-weight: bold;
    font-size: 100px;
    text-align: center;}
.t-table02  {font-size: 80px}
 
 /*Q&A*/
.acbox{margin: 30px 20px}

.acbox label{padding: 50px;
            font-size: 43px}

.acbox-under{
  font-size: 45px;/* 開いた部分の文字サイズ */
}

/* お申込みボタン */
.btn-border {margin: 50px 0;
            padding: 0;
            }

a.btn-border {
    padding: 80px 60px;
  border: 5px solid #225966;
  border-radius: 0;
  background: #a2e288;
  -webkit-box-shadow: 6px 6px 0 #225966;
  box-shadow: 20px 20px 0 #225966;
  font-size: 60px
}

a.btn-border:hover {
  -webkit-box-shadow: -6px -6px 0 #225966;
  box-shadow: -6px -6px 0 #225966;
}

/* 保険が適用されるかなボタン */
.btn-border02 {margin: 10px 0 100px 0;
            padding: 0;
            }

a.btn-border02 {
  padding: 80px 30px;
  border: 5px solid #225966;
  border-radius: 0;
  background: ##FFF799;
  -webkit-box-shadow: 6px 6px 0 #225966;
  box-shadow: 20px 20px 0 #225966;
  font-size: 50px
}

a.btn-border02:hover {
  -webkit-box-shadow: -10px -10px 0 #225966;
  box-shadow: -10px -10px 0 #225966;
}

.tekiyo-small   {font-size: 40px}


/* 見出し */
.midashi01{margin:80px 0;
    padding: 30px 0;
    font-size: 140px;
    box-shadow: 10px 20px 0 #225966;
    border: 4px solid #225966;
    color: #FFF799;
    -webkit-text-stroke:4px #225966;}
    
.midashi02{margin: 20px;
    padding: 30px;
    font-size: 100px;
    font-weight: 1000}
/* お問合せ */
.otoiawase p    {font-size: 50px}
/*コピーライト*/        
.copyright p    {font-size: 30px}

/* ページトップ */
.pagetop {
    height: 200px;
    width: 200px;
    position: fixed;
    right: 30px;
    bottom: 400px;
    background: #A2E288;
    border: solid 10px #225966;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 60px;
    width: 60px;
    border-top: 10px solid #225966;
    border-right: 10px solid #225966;
    transform: translateY(20%) rotate(-45deg);
}

}



/* ### IE11以外 ### */
@supports not (display: grid){

html    {background-color: #fff;}

body    {max-width: 1180px;
        margin: 0 auto;
        padding: 10px 20px;
        background-color: #b8f5ff}
        


}


/*### IE11用 ###*/
@media all and (-ms-high-contrast: none), not all and (-ms-high-contrast: none){

html    {background-color: #f7f7f7;}

body    {max-width: 1180px;
        margin: 0 auto;
        padding: 0;
        background-color: #b8f5ff}


.copyright  {background-color: #094289;
            margin: 0;
            padding: 20px}


}