@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}

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

/* 料金シミュレーション */
.simu    {margin: 100px 0;
               padding: 0;
               background-color: #fff;
                text-align: center;
                border: 2px solid #225966}
                
.kids-birthday  {margin: 0;
                padding: 30px 0;
                font-size: 40px}
                
.radiobox   {margin: 10px　0;
            padding: 0;
            text-align: center;
            font-size: 30px;
            color: #3EBFFF;
            }  
            
.radiobox-message p {margin: 50px;
            padding-left: 10px;
            font-size: 15px;
            text-align: left}
            
.radiobutton01 {display: none;}
.radiobutton01 + label {
  background-color: #fff;
  border: 3px solid #225966;
  color: #225966;
  padding: 30px 110px;
}

.radiobutton01 + label    {cursor: pointer;}

.radiobutton01:checked + label {
  background-color: #A2E288;
  color: #225966;
  
}
.radiobutton02 {display: none;}
.radiobutton02 + label {
  background-color: fff;
  border: 3px solid #225966;
  color: #225966;
  padding: 30px 110px;
}

.radiobutton02 + label    {cursor: pointer;}

.radiobutton02:checked + label {
  background-color: #A2E288;
  color: #225966;
  
}

.radiobutton03 {display: none;}
.radiobutton03 + label {
  background-color: fff;
  border: 3px solid #225966;
  color: #225966;
  padding: 30px 90px;
}

.radiobutton03 + label    {cursor: pointer;}

.radiobutton03:checked + label {
  background-color: #A2E288;
  color: #225966;
  
}
            

.kikan      {margin: 0;
            padding: 50px 0}
.kikan-box  {margin: 0;
        padding: 20px 0;
        font-size: 30px}
        
.plan      {margin: 0;
            padding: 0 0 50px 0}
            
.btn02      {margin: 50px 280px;
            padding: 30px;
            border: 3px solid #225966;
            background-color: #fff}
.btn02 a      {display: block;
                text-decoration: none;
                font-size: 30px;
                color: #225966}
.radiobox01   {margin: 10px　0;
            padding: 30px;
            text-align: center;
            font-size: 30px;
            color: #3EBFFF;
            }                         
.radiobox02   {margin: 10px　0;
            padding: 30px;
            text-align: center;
            font-size: 30px;
            color: #3EBFFF;
            }              
.radiobutton04 {display: none;}
.radiobutton04 + label {
  background-color: fff;
  border: 3px solid #225966;
  color: #225966;
  padding: 30px 150px;
}

.radiobutton04 + label    {cursor: pointer;}

.radiobutton04:checked + label {
  background-color: #A2E288;
  color: #225966;
  
}
.radiobutton05 {display: none;}
.radiobutton05 + label {
  background-color: fff;
  border: 3px solid #225966;
  color: #225966;
  padding: 30px 150px;
}

.radiobutton05 + label    {cursor: pointer;}

.radiobutton05:checked + label {
  background-color: #A2E288;
  color: #225966;
  
}

.kikan-message01 p   {margin: 20px 0;
                    padding: 0;
                    font-size: 30px;
                    font-weight: 500;
                    color: #f76d8e}
.kikan-message02 p   {margin: 20px 0;
                    padding: 0;
                    font-size: 30px;
                    font-weight: 500;
                    color: #f76d8e}


.ryoukin      {margin: 0;
            padding: 0}
.ryoukin p  {margin: 0;
            padding: 0;
            font-size: 30px;
            font-weight: 500;
            color: #225966}
            
.ryoukin01  {margin: 100px 300px;
    padding: 30px;
    box-shadow: 5px 10px 0 #225966;
    border: 1px solid #225966;
    background-color: #A2E288}
.ryoukin01 p    {color: #FFF799;
    -webkit-text-stroke:1px #225966;
    font-weight: bold;
    font-size: 30px;
    text-align: center;}   
           
.ryoukin02  {margin: 100px 300px;
    padding: 50px;
    box-shadow: 5px 10px 0 #225966;
    border: 2px solid #225966;
    background-color: #A2E288}
.ryoukin02 p    {color: #FFF799;
    -webkit-text-stroke:2px #225966;
    font-weight: bold;
    font-size: 40px;
    text-align: center;}   

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

.copyright p	{margin: 0;
                padding: 10px;
                color: #225966;
                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-big02    {font-size: 78px}
.t-big03    {font-size: 50px}
.t-strong   {font-size: 40px}
.t-small    {font-size: 12px}
.t-small02    {font-size: 20px}

/* ボタン関連共通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: #fff;
  border-radius: 0.5rem;
}
/* お申込みボタン */
.button {
  margin: 50px 0;
  display       : inline-block;
  font-size     : 28pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 50px 150px;   /* 余白       */
  background    : #A2E288;     /* 背景色     */
  color         : #225966;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 15px 15px #225966;  /* 影の設定 */
  border        : 3px solid #225966;    /* 枠の指定 */
}
.button:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #225966;     /* 背景色     */
  background    : #ffffff;     /* 文字色     */
}


/* 見出し */
.midashi01 {
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
}


.midashi04  {
            margin: 20px;
            padding: 50px;
            font-size: 36px;
            text-align: center;
            
}
/* グリッド */
body    {display: grid;
        grid-template-columns: [left] minmax(20px, 1fr) [main] minmax(auto, 1280px)[main-end] minmax(20px, 1fr) [right];
        grid-template-rows: [head] auto [simu] auto [foot] auto[bottom]}
        
.simu-header-pc    {grid-column-start: left;
            grid-column-end: right;
        grid-row-start: head;}
        
.simu-header-sp    {grid-column-start: left;
            grid-column-end: right;
            grid-row-start: head;}
            
.simu    {grid-column-start: main;
            grid-row-start: simu;}
            
.radiobox-all  {display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: auto;
            grid-row-gap: 20px}
            
.radiobox-all02  {display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto;
            grid-row-gap: 20px}

.kikan-all  {display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto;
            grid-row-gap: 20px}
            
.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}

            
/* ########################### 1340px以下 ##############################*/
@media (max-width: 1340px) {
.radiobox   {font-size: 20px}
.radiobox-message p  {margin: 50px 10px}
.radiobutton01 + label {
  padding: 30px 70px;
}
.radiobutton02 + label {
  padding: 30px 70px;
}
.radiobutton03 + label {
  padding: 30px 60px;
}

.radiobutton04 + label {
  padding: 30px 70px;
}
.radiobutton05 + label {
  padding: 30px 70px;
}
.radiobutton06 + label {
  padding: 30px 100px;
}
.radiobutton07 + label {
  padding: 30px 100px;
}
.radiobox01 {font-size: 16px}
.radiobox02 {font-size: 16px}
.radiobox03 {font-size: 16px}
.radiobox04 {font-size: 16px}

.btn02      {margin: 50px 150px;
            padding: 30px;
            border: 3px solid }
.btn02 a      {display: block;
                text-decoration: none;
                font-size: 30px;
                }
 .button {
  margin: 50px 0;
  padding       : 50px 80px;   /* 余白       */
  line-height   : 1em;         /* 1行の高さ  */
  box-shadow    : 15px 15px ;  /* 影の設定 */
  border        : 3px solid ;    /* 枠の指定 */
}
      
.ryoukin02 p  {font-size: 25px}
                
.ryoukin02  {padding: 30px;
    margin: 50px 150px;
    box-shadow: 0 0 0 8px #A2E288;/*背景色外側*/
    border: 4px dashed /*線*/}
    
.t-big02    {font-size: 38px}


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

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

.midashi01{margin:50px;
    padding: 20px 0;
    font-size: 28px;
    font-weight: 800;
    -webkit-text-stroke:1px #225966;}

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

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

.simu  {grid-column-start: left;
            grid-column-end: right;}
.simu   {margin: 30px 0}
.kikan-all  {display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            grid-row-gap: 20px}
.menu   {grid-template-columns: 1fr 1fr;}
.menu a  {padding: 10px;
            font-size: 10px;
            border-bottom: 1px}
            
.radiobox-all  {display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            grid-row-gap: 30px;}
            
.radiobox-all02  {display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            grid-row-gap: 100px}
            
.radiobox   {margin: 10px　0;
            padding: 0;
            text-align: center;
            font-size: 24px;
            }
.radiobox-message p  {margin: 50px 200px}
.radiobutton {display: none;}
.radiobutton + label {
  padding: 30px 80px;
}
            
.radiobox01   {margin: 10px　0;
            padding: 10px;
            text-align: center;
            font-size: 24px;
            }  
.radiobutton01 + label {
  padding: 30px 120px;
}
.radiobutton02 + label {
  padding: 30px 120px;
}
.radiobutton03 + label {
  padding: 30px 110px;
}
.radiobutton04 {display: none;}
.radiobutton04 + label {
  padding: 30px 65px;
}


.radiobox02   {margin: 10px　0;
            padding: 10px;
            font-size: 24px;
            }              
.radiobutton05 {display: none;}
.radiobutton05 + label {
  padding: 30px 65px;
}

.kids-birthday  {margin: 0;
                padding: 10px 0;
                font-size: 30px}
                
.kikan-message01 p   {margin: 20px;
                    padding: 0;
                    font-size: 20px;
                    font-weight: 500;
                    color: #f76d8e}

.ryoukin p  {font-size: 20px}
.ryoukin01  {margin: 10px;
    padding: 10px;
    box-shadow: 5px 10px 0 #225966;
    border: 1px solid #225966;
    background-color: #A2E288}
.ryoukin01 p    {color: #FFF799;
    -webkit-text-stroke:1px #225966;
    font-weight: bold;
    font-size: 26px;
    text-align: center;}   
    
.ryoukin02  {padding: 40px;
    margin: 20px;
    border: 2px dashed}
.ryoukin02 p    {-webkit-text-stroke:1.5px #225966;
                font-size: 24px}
    
.intro p    {font-size: 14px}

.t-strong   {font-size: 22px}
.t-big02    {font-size: 50px}
.t-big03    {font-size: 26px}
       
.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 ;}
       
/* 9つの補償 */
.hosyou {padding: 10px}

.hosyou-wrap {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            grid-row-gap: 20px}
            
.hosyou-all    {margin: 5px;
                padding: 10px;}
                
.hosyou-box {margin: 0;
            padding: 10px;
            border-radius: 20px}
                
/* プラン */
.ryoukin-wrap {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            grid-row-gap: 20px}
            
.ryoukin-box {
            padding: 10px;}
            
.tb01 {
    width: 100%;
  }
  table.tb01 th,
  table.tb01 td {
    display: block;
    width: 100%;
    border-bottom:none;
  }
  .tb01 tr:last-child{
    border-bottom: solid 1px;
  }
 
 /*Q&A*/
.acbox{margin: 10px 0}

.acbox label{font-size: 12px}

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

a.btn-border {
    padding: 20px 60px;
  border: 1px;
  border-radius: 0;

  -webkit-box-shadow: 6px 6px 0;
  box-shadow: 6px 6px 0;
  font-size: 18px
}

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

.btn02      {margin: 10px 50px;
            padding: 30px 30px;
            border: 3px solid}
.btn02 a      {display: block;
                text-decoration: none;
                font-size: 20px;}
.button {
  margin: 50px 0;
  display       : inline-block;
  font-size     : 18pt;        /* 文字サイズ */
  padding       : 30px 80px;   /* 余白       */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 10px 10px ;  /* 影の設定 */
  border        : 3px solid;    /* 枠の指定 */
}

/* 見出し */
.midashi01{margin:20px;
    padding: 20px 0;
    font-size: 28px;
    font-weight: 800;
    -webkit-text-stroke:1px #225966}
    
.midashi02{margin: 20px;
    padding: 10px;
    font-size: 30px;
    font-weight: 1000}
.midashi04  {
            margin: 60px 0;
            padding: 10px;
            font-size: 30px;
            text-align: center;
            
}

        

}

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

html    {background-color: #fff;}

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


}

/* ########################### 600px以下 ##############################*/
@media (max-width: 600px) {
.radiobox-message p  {margin: 50px 120px}

.button     {margin: 50px 0;
            padding: 40px 50px;
            font-size: 24px;
            }
.simu   {padding: 50px 0}

.btn02      {margin: 20px ;
            padding: 30px 30px;
            border: 3px solid}
}


/* ########################### 400px以下 ##############################*/
@media (max-width: 400px) {
.radiobox-message p  {margin: 50px 80px}

.button     {margin: 50px 0;
            padding: 40px 50px;
            font-size: 24px;
            }
.simu   {padding: 50px 0}

.btn02      {margin: 20px ;
            padding: 30px 30px;
            border: 3px solid}
            
.radiobutton04 + label {
  padding: 30px 50px;
}

.radiobutton05 + label {
  padding: 30px 50px;
}

.radiobox-message p  {margin: 50px 50px}

            
}


/*### 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: #A2E288}


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


}



.kokuchi   {margin: 100px;
    padding: 300px 0;
    background-color: #fff}

.qa     {padding: 50px}



.message    {
    margin: 0 30px;
    padding: 20px 0}

.message p  {margin: 0;
    padding: 10px 0;
    color: #225966;
    font-size: 20px}

.q01    {
    margin: 0 auto;
    padding: 20px 0}

.q01 p  {margin: 0;
    padding: 10px 0;
    color: #225966;
    font-size: 20px}

.q02    {
    margin: 0 auto;
    padding: 20px 0}

.q02 p  {margin: 0;
    padding-top: 60px;
    padding-bottom: 10px;
    color: #225966;
    font-size: 20px}

.q03    {
    margin: 0 auto;
    padding: 20px 0}

.q03 p  {margin: 0;
    padding-top: 60px;
    padding-bottom: 10px;
    color: #225966;
    font-size: 20px}

.q04    {
    margin: 0 auto;
    padding: 20px 0}

.q04 p  {margin: 0;
    padding-top: 60px;
    padding-bottom: 10px;
    color: #225966;
    font-size: 20px}

.q05    {
    margin: 0 auto;
    padding-top: 60px;
    padding-bottom:100px}

.q05 p  {margin: 0;
    padding-top: 60px;
    padding-bottom: 10px;
    color: #225966;
    font-size: 20px}

.q06    {
    margin: 0 auto;
    padding: 20px 0}

.q06 p  {margin: 0;
    padding-top: 60px;
    padding-bottom: 10px;
    color: #225966;
    font-size: 20px}

.q07    {
    margin: 0 auto;
    padding: 20px 0}

.q07 p  {margin: 0;
    padding-top: 60px;
    padding-bottom: 10px;
    color: #225966;
    font-size: 20px}

.q08    {
    margin: 0 auto;
    padding: 20px 0}

.q08 p  {margin: 0;
    padding-top: 60px;
    padding-bottom: 10px;
    color: #225966;
    font-size: 20px}



.kokuchi  {grid-column-start: main;
    grid-row-start: kokuchi;}


/* ########################### 1179px以下 ##############################*/
@media (max-width: 1179px) {
    .kokuchi   {margin: 20px;
        padding: 50px 0;
        background-color: #fff}

}

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

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

    .kokuchi    {margin: 0;
        padding: 0}



    .qa     {padding: 5px}


}