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

/* 適用されるかな */
.tekiyou    {margin: 100px 0;
               padding: 0;
               background-color: #fff;
                text-align: center;
                border: 2px solid #225966}
                
.hosyou-kaishi img  {width: 80%}
                
.btn01  {margin: 0;
        padding: 0;
        text-align: center}
.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;
}


/* コピーライト */
.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%, #FF8F8F 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算出をしやすくするために*/
}


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


.midashi04  {
            margin: 20px;
            padding: 20px 40px;
            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 [tekiyou] 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;}
            
.tekiyou    {grid-column-start: main;
            grid-row-start: tekiyou;}
            
.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) {



      

.t-big02    {font-size: 38px}


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


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

.tekiyou  {grid-column-start: left;
            grid-column-end: right;}
.tekiyou   {margin: 30px 0}

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

.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 ;}
       
.copyright  {grid-column-start: left;
       grid-column-end: right;
       padding: 20px 0 0 0 ;}

.hosyou-kaishi img  {width: 100%}
            
.midashi04  {font-size: 20px}

/* 戻るボタン */
.btn01  {text-align: center}
.btn-border {margin: 50px;
            padding: 0;
            }

a.btn-border {
    padding: 20px 60px;
    border: 2px solid #225966;
  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;
}



}

/* 見出し */

.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;
            }
.tekiyou   {padding: 50px 0}

            
}


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

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

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

}


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


}