@charset "UTF-8";

body {margin: 0;
     font-family:'kosugi maru', sans-serif;
  letter-spacing: 0.05em; /* 文字間を少し広げる */
font-style: normal;
font-weight: 400;

  background-color: #ad003a;

}

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

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

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

/* ヘッダー */
.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: rgb(255, 255, 255, 0.7);
                text-align: center}
.simu-message {margin: 0;
                padding: 20px;
                text-align: center;
               font-weight: 500;
              font-size: 22px;}
.simu p {margin: 50px 0;}

.select-box01   { width: 60%;
                position: relative;
                display: inline-block;
                padding: 20px 0;}
                
.select-box01::after    {content: '';
                        width: 6px;
                        height: 6px;
                        border: 0px;
                        border-bottom: solid 2px #b4b3b3;
                        border-right: solid 2px #b4b3b3;
                        -ms-transform: rotate(45deg);
                        -webkit-transform: rotate(45deg);
                        transform: rotate(45deg);
                        position: absolute;
                        top: 50%;
                        right: 10px;
                        margin-top: -4px;}
                        
.year       {-webkit-appearance: none;
            -moz-appearance: none;
             appearance: none;
            width: 100%;
            height: 40px;
            background: #fff;
            opacity: 0.7;
            position: relative;
            z-index: 1;
            padding: 0 40px 0 10px;
            border: 3px solid #f96ea7;
            border-radius: 2px;}
            
.year::-ms-expand {display: none;}

.select-box02   { width: 60%;
                position: relative;
                display: inline-block;
                padding: 20px 0;}
                
.select-box02::after    {content: '';
                        width: 6px;
                        height: 6px;
                        border: 0px;
                        border-bottom: solid 2px #b4b3b3;
                        border-right: solid 2px #b4b3b3;
                        -ms-transform: rotate(45deg);
                        -webkit-transform: rotate(45deg);
                        transform: rotate(45deg);
                        position: absolute;
                        top: 50%;
                        right: 10px;
                        margin-top: -4px;}
                        
.month       {-webkit-appearance: none;
            -moz-appearance: none;
             appearance: none;
            width: 100%;
            height: 40px;
            background: #fff;
            opacity: 0.7;
            position: relative;
            z-index: 1;
            padding: 0 40px 0 10px;
            border: 3px solid #f96ea7;
            border-radius: 2px;}
            
.month::-ms-expand {display: none;}

.select-box03   { width: 60%;
                position: relative;
                display: inline-block;
                padding: 20px 0;}
                
.select-box03::after    {content: '';
                        width: 6px;
                        height: 6px;
                        border: 0px;
                        border-bottom: solid 2px #b4b3b3;
                        border-right: solid 2px #b4b3b3;
                        -ms-transform: rotate(45deg);
                        -webkit-transform: rotate(45deg);
                        transform: rotate(45deg);
                        position: absolute;
                        top: 50%;
                        right: 10px;
                        margin-top: -4px;}
                        
.day       {-webkit-appearance: none;
            -moz-appearance: none;
             appearance: none;
            width: 100%;
            height: 40px;
            background: #fff;
            opacity: 0.7;
            position: relative;
            z-index: 1;
            padding: 0 40px 0 10px;
            border: 3px solid #f96ea7;
            border-radius: 2px;}
            
.day::-ms-expand {display: none;}

 /* クレジット決済 */

.credit-all {margin: 30px 0;
                  text-align: center;}

 .credit-select {
    border: none;
}

.credit-select label {
    display: flex;
    align-items: center;
    margin: auto;
    gap: 1em;
    max-width: 600px;
    margin-bottom: .4em;
    padding: 20px 30px;
    border: 1px solid #fe4169;
    border-radius: 10px;
    background-color: #fe416926;
    cursor: pointer;
    font-size: 26px;
}

.credit-select label:has(:checked) {
    background-color: #fe4169;
    color: #fff;
}

.credit-select label::before,
.credit-select label:has(:checked)::after {
    border-radius: 50%;
    content: '';
}

.credit-select label::before {
    width: 14px;
    height: 14px;
    background-color: #fff;
}

.credit-select label:has(:checked)::after {
    position: absolute;
    top: 50%;
    left: calc(7px + .7em);
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    background-color: #fe4169;
}

.credit-select input {
    display: none;
}

             

 /* 保険の選択 */

.hoken-select-all {margin: 30px 0;
                  text-align: center;}

 .hoken-select {
    border: none;
}

.hoken-select label {
    display: flex;
    align-items: center;
    margin: auto;
    gap: 1em;
    max-width: 600px;
    margin-bottom: .4em;
    padding: 20px 30px;
    border: 1px solid #fe4169;
    border-radius: 10px;
    background-color: #fe416926;
    cursor: pointer;
    font-size: 26px;
}

.hoken-select label:has(:checked) {
    background-color: #fe4169;
    color: #fff;
}

.hoken-select label::before,
.hoken-select label:has(:checked)::after {
    border-radius: 50%;
    content: '';
}

.hoken-select label::before {
    width: 14px;
    height: 14px;
    background-color: #fff;
}

.hoken-select label:has(:checked)::after {
    position: absolute;
    top: 50%;
    left: calc(7px + .7em);
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    background-color: #fe4169;
}

.hoken-select input {
    display: none;
}

/* 保険の詳細はこちら */
.button-shousai a {
    text-decoration: none;
   margin-top: 20px;
    border-radius: 10px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    font-size: 26px;
    max-width: 600px;
    padding: 30px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: rgb(252, 149, 149);
    background: linear-gradient(270deg, rgb(255, 160, 71) 0%, rgb(255, 132, 60) 100%);
}
.button-shousai a:hover {
    background: rgb(252, 149, 149);
    background: linear-gradient(270deg, rgb(255, 128, 16) 0%, rgb(255, 73, 37) 100%);
}

/* グループ申込の注意点 */
    
.group_message {
      margin: 2em 4em;
      background: #fff;
      border: #e54366 solid 2px;
  }
.group_message .box-title {
      font-size: 20px;
      background: #e54366;
      padding: 12px;
      text-align: center;
      color: #FFF;
      font-weight: bold;
      letter-spacing: 0.5em;
  }

.group_message_p  {padding: 30px;}
.group_message_p p{
      margin: 0;
      text-align: left;
      line-height: 1.5em;
      font-size: 20px;
      padding-left: 1em;
      font-weight: bold;}

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

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

/* 文字エフェクト */
.t-yellow   {background:linear-gradient(transparent 60%, #FFF799 60%);}
.t-red   {background:linear-gradient(transparent 60%, #f76d8e 60%);}
.t-red02  {color: #f76d8e;}
.t-big01    {font-size: 52px}
.t-big02    {font-size: 78px}
.t-strong   {font-size: 26px;
            margin: 0 10px;}
.t-small    {font-size: 12px}
.t-small02    {font-size: 20px}


/* お申込みボタン */
.button {
 position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 700px;
    padding: 40px 200px;
    background: #f3a600;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-size: 26px;
    font-weight: 600;
    border-radius: 100px;
    box-shadow: 0 5px 0px #ed6a05, 0 10px 20px #ed6a05;
    border: none;
}
.button:hover {
   background:#FF2F2F;
  box-shadow: 0 5px 0px #B73434,0 7px 30px #FF2F2F;
  cursor: pointer;
}

.button:active{
  background:#FF8282;
  box-shadow: 0 0px 10px #FF8282;
  box-shadow: 0 5px 0px #CC6262,0 4px 10px #FF8282;
}


/* 見出し */
h2 {
  margin-top: 80px;
  margin-bottom: 0;
  padding: 40px;
  color: #fff;
  font-size: 30px;
  text-align: center;
  background-image: -webkit-gradient(linear, left top, right top, from(#ff83cb), to(#fe4069));
  background-image: -webkit-linear-gradient(left, #ff83cb 0%, #fe4069 100%);
  background-image: linear-gradient(to right, #ff83cb 0%, #fe4069 100%);
}

.midashi01  {margin: 0 40px;}


/* 告知 */
.kokuchi    {margin: 0;
  padding: 100px;}
                      
                      
input[type=radio] {
display: none; /* ラジオボタンを非表示にする */}

input[type="radio"]:checked + label {
background: #ad003a;/* マウス選択時の背景色を指定する */
color: #ffffff; /* マウス選択時のフォント色を指定する */}

.label:hover {
background-color: #ffdbdb; /* マウスオーバー時の背景色を指定する */}

.label {
display: block;	/* ブロックレベル要素化する */ 
float: left;	/* 要素の左寄せ・回り込を指定する */ 
margin: 5px 20px;	/* ボックス外側の余白を指定する */
width: 100px;	/* ボックスの横幅を指定する */
height: 45px;	/* ボックスの高さを指定する */
padding-left: 5px;	/* ボックス内左側の余白を指定する */
padding-right: 5px;	/* ボックス内御右側の余白を指定する */
background-color: #fff;
color: #ad003a;	/* フォントの色を指定 */
text-align: center;	/* テキストのセンタリングを指定する */
line-height: 45px;	/* 行の高さを指定する */
cursor: pointer;	/* マウスカーソルの形（リンクカーソル）を指定する */
border: 2px solid #ad003a;/* ボックスの境界線を実線で指定する */
border-radius: 5px;	/* 角丸を指定する */}

.message    {
  margin: 0 auto;
  padding: 20px 0}
  
.message p  {margin: 0;
  padding: 10px 0;
  color: #505050;
  font-size: 30px;
  font-weight: 500;}

.message02 p  {margin: 0;
  padding: 10px 0;
  color: #505050;
  font-size: 24px;
  font-weight: 500;
  text-align: left;}
  
.q01    {
  margin: 0 auto;
  padding: 20px 0}
  
.q01 p  {margin: 0;
  padding: 10px 0;
  color: #505050;
  font-size: 20px;
  text-align: justify;
  padding-left: 1em;
  text-indent: -1em;}
  
.q02    {
margin: 0 auto;
padding: 20px 0;
}
  
.q02 p  {margin: 0;
padding-top: 60px;
padding-bottom: 10px;
color: #505050;
font-size: 20px;
text-align: justify;
padding-left: 1em;
text-indent: -1em;}

.q03    {
margin: 0 auto;
padding: 20px 0}
  
.q03 p  {margin: 0;
padding-top: 60px;
padding-bottom: 10px;
color: #505050;
font-size: 20px;
text-align: justify;
padding-left: 1em;
text-indent: -1em;}

.q04    {
margin: 0 auto;
padding: 20px 0}
  
.q04 p  {margin: 0;
padding-top: 60px;
padding-bottom: 10px;
color: #505050;
font-size: 20px;
text-align: justify;
padding-left: 1em;
text-indent: -1em;}

.q05    {
margin: 0 auto;
padding: 20px 0}
  
.q05 p  {margin: 0;
padding-top: 60px;
padding-bottom: 10px;
color: #505050;
font-size: 20px;
text-align: justify;
padding-left: 1em;
text-indent: -1em;}

.q06    {
  margin: 0 auto;
  padding: 20px 0}
    
  .q06 p  {margin: 0;
  padding-top: 60px;
  padding-bottom: 10px;
  color: #505050;
  font-size: 20px;
  text-align: justify;
  padding-left: 1em;
  text-indent: -1em;}

.q07    {
  margin: 0 auto;
  padding: 20px 0}
    
  .q07 p  {margin: 0;
  padding-top: 60px;
  padding-bottom: 10px;
  color: #505050;
  font-size: 20px;
  text-align: justify;
  padding-left: 1em;
  text-indent: -1em;}

.q08    {
  margin: 0 auto;
  padding: 20px 0}
    
  .q08 p  {margin: 0;
  padding-top: 60px;
  padding-bottom: 10px;
  color: #505050;
  font-size: 20px;
  text-align: justify;
  padding-left: 1em;
  text-indent: -1em;}

.q09    {
  margin: 0 auto;
  padding: 20px 0}
    
  .q09 p  {margin: 0;
  padding-top: 60px;
  padding-bottom: 10px;
  color: #505050;
  font-size: 20px;
  text-align: justify;
  padding-left: 1em;
  text-indent: -1em;}



/* グリッド */
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-all01  {display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: auto;
            grid-row-gap: 40px}
            
            
.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}


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

  .ryoukin02 p  {font-size: 30px;
                color: #fff;}
                  
  .ryoukin02  {padding: 20px;
      margin: 50px 300px;
     background-image: -webkit-gradient(linear, left top, right top, from(#ff83cb), to(#fe4069));
  background-image: -webkit-linear-gradient(left, #ff83cb 0%, #fe4069 100%);
  background-image: linear-gradient(to right, #ff83cb 0%, #fe4069 100%);
  border-radius: 10px;}
      
  .t-big02    {font-size: 60px}

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

 .ryoukin02  {padding: 0px;
      max-width: 500px;
     padding: 10px;
    margin: 50px auto;}  

}

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

  .radiobox-all03 {margin: 0 50px;}

}
  



/* ########################### 920px以下 ##############################*/
@media (max-width: 920px) {
.t-strong   {font-size: 22px;
            margin: 0 10px;}

.select-box01   { width: 90%;}
.select-box02   { width: 90%;}
.select-box03   { width: 90%;}

.credit-select label {max-width: 350px;}
.hoken-select label {max-width: 350px;}

.button-shousai a {max-width: 400px};



  
}

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


}



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

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

.simu  {grid-column-start: left;
            grid-column-end: right;}

.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: 80px;}

.ryoukin02  {padding: 0px;
      margin: 50px auto;
     padding: 10px;
    max-width: 450px;}        
      
/* お申込みボタン */
.button {
 position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 450px;
    padding: 40px 100px;
    background: #f3a600;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-size: 26px;
    font-weight: 600;
    border-radius: 100px;
    box-shadow: 0 5px 0px #ed6a05, 0 10px 20px #ed6a05;
    border: none;
}

.kokuchi    {margin: 0;
  padding: 50px 20px;}

}

/* ########################### 640px以下 ##############################*/
@media (max-width: 640px) {
.midashi01  {margin: 0 20px;}

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

.select-box01   { width: 90%;}
.select-box02   { width: 90%;}
.select-box03   { width: 90%;}

.credit-select label {max-width: 350px;}
.hoken-select label {max-width: 350px;}

.button-shousai a {max-width: 400px};



}

/* ########################### 500px以下 ##############################*/
@media (max-width: 500px) {
.midashi01  {margin: 0 10px;}

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

.select-box01   { width: 90%;}
.select-box02   { width: 90%;}
.select-box03   { width: 90%;}

.credit-select label {max-width: 300px;}
.hoken-select label {max-width: 300px;}

.button-shousai a {max-width: 300px}

.button {max-width: 330px;
        padding: 50px 60px;
        font-size: 22px;}
.ryoukin02  {max-width: 330px;}


}          

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




}


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


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


}

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