@charset "UTF-8";

body {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight:600;
font-style: normal;
background: url("../img/whole_bg02.png");
background-repeat: repeat;            
background-position:center center;   
}
.main_cont{
width: 85%;
margin: 0px auto 100px;
background: #ffffff;
border-radius: 10px;
border: 5px solid #A3CFFF;
padding: 20px;
position: relative;
top: -70px;
}
header{
background: #8fb2ff; 
padding: 20px 0 100px;
margin: 0;
}
h1{
font-weight: bold;
font-size: 200%;
text-align: center;
color: #0068E4;
    font-family: "Noto Sans JP", sans-serif;
}
h1::before {
content: url("../img/senior_mark.png");  
position:relative;
top:5px;      
left:0;    
} 
h1::after {
content: url("../img/senior_mark.png");  
position:relative;
top:5px;      
right:0;    
} 
h2{
margin: 10px auto;
line-height: 1.3;
font-size: 180%;
font-weight: bold;
text-indent: -2.5rem;
padding-left: 3rem;
color: #000000; 
text-align: center;
}
h2::before {
content: url("../img/senior_mark.png");  
position:relative;
top:5px;      
left:0;    
} 
h2::after {
content: url("../img/senior_mark.png");  
position:relative;
top:5px;      
right:0;    
} 
h3{
margin: 10px auto;
line-height: 1.3;
font-size: 130%;
font-weight: bold;
text-indent: -2.5rem;
padding-left: 3rem;
color: #000000; 
text-align: center;
}
h3::before {
content: url("../img/senior_mark.png");  
position:relative;
top:5px;      
left:0;    
} 
h3::after {
content: url("../img/senior_mark.png");  
position:relative;
top:5px;      
right:0;    
} 
.msg_box{
margin: 20px auto;
line-height: 1.3;
font-size: 200%;;
font-weight: bold;
padding: 10px 0;
}
.msg_box00{
margin: 10px auto;
line-height: 1.3;
font-size: 120%;
font-weight: bold;
color: #E40003;
text-align: center;
} 
.cyui_img{
width: 30px;
height:30px;  
margin: auto;
padding-bottom: 5px;
}
.msg_box00 img{
width: 100%;
}
.msg_box01{
margin: 10px auto;
line-height: 1.3;
font-size: 120%;
font-weight: bold;
text-indent: -2.5rem;
padding-left: 3rem;
color: #E40003;
} 
.msg_box01:before {
content: url("../img/cyuui_mark.png");  
position:relative;
top:5px;     
left:0;
} 
.msg_box011{
margin: 10px auto;
line-height: 1.3;
font-size: 180%;
font-weight: bold;
text-indent: -2.5rem;
padding-left: 3rem;
} 
.msg_box011:before {
content: url("../img/cyuui_mark.png");  
position:relative;
top:5px;     
left:0;
} 
.msg_box0111{
margin: 10px auto;
line-height: 1.3;
font-size: 130%;
font-weight: bold;
text-indent: -2.5rem;
padding-left: 3rem;
} 
.msg_box0111:before {
content: url("../img/cyuui_mark.png");  
position:relative;
top:5px;     
left:0;
} 
.msg_box02{
margin: 30px auto 0px;
line-height: 1.5;
text-align: center;
font-weight: bold;
font-size: 150%;
color: #574B72;
}
.msg_box03{
margin: 5px auto;
line-height: 1.5;
font-weight: bold;
font-size: 150%;
}
.number_midashi{
margin-right: 5px;
color: #28288c;
}
select{
border: none; 
}
select.co_aka{
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/* ie対応 */
select::-ms-expand {
display: none;
}
.pa10{
padding: 10px 0;
}
.pa60{
padding: 60px 0;
}
.wi_90{
width: 90%;
margin:  50px auto 0;
}
.modorugamen{
font-size: 180%;
font-weight: bold;
padding: 60px 10px;
text-align: center;
}
.flex_box{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.flex_box02{
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
}
.flex_box03{
display: flex;
justify-content: center;
flex-direction: row;
align-items: flex-start;
}
.flex_box04{
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
}
.flex_box05{
display: flex;
justify-content: center;
flex-direction: column;
margin: 10px auto;
width: 95%;
}
.flex_stretch{
Align-items:stretch;
}
.flex_20{
width: 22%;
margin: 0 auto;
}
.flex_30{
width: 28%;
margin: 0 auto;
}
.flex_35{
width: 33%;
margin: 0 auto;
}
.flex_40{
width: 38%;
margin: 0 auto;
}
.flex_50{
width: 48%;
margin: 0 auto;
}
.flex_60{
width: 58%;
margin: 0 auto;
}
.flex_65{
width: 63%;
margin: 0 auto;
}
.flex_70{
width: 68%;
margin: 0 auto;
}
.flex_90{
width: 90%;
margin: 0 auto;
}
.flex_100{
width: 98%;
margin: 0 auto;
}
.flex_box img,.flex_100 img,.flex_box02 img,.flex_box03 img,.flex_box04 img,.flex_box05 img{
width: 100%;
}
.img_90{
width: 90%;
margin: 0 auto;
}
.kakunin_box{
width: 32%;
box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
background-color: #EEE;
display: flex;
flex-direction: column;
margin: 10px;
}
.btn_box{
margin: 10px auto;
display: flex;
justify-content: center;
flex-direction: row;
width: 90%;
}
.btn_box02{
display: flex;
flex-direction: column;
justify-content: center;
width: 90%;
margin: 10px auto;
}
.button_general {
font-size: 120%;
font-weight: bold;
padding: 10px 0;
text-align: center;
margin: 20px auto;
width: 100%;
border: 2px solid #FFD61B;
background: #F8CC00;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
border-radius: 10px;
cursor: pointer;
color: #495799;
letter-spacing: 0.2em;
}
.button_general:hover {
background: #28288c;
color: #ffffff;
}
.kakunin_btn{
width: 80%;
margin: 10px auto;
}
button.kakunin{
width: 100%;
margin: 0 auto 20px;
cursor:pointer;
border:none;
color: #fff;
font-weight:bold;
border-radius: 5px;
padding: 15px 0;
background:#ca012d;
font-size: 150%;
}
button.kakunin:disabled{
background:#FFE882;
}
button.kakunin:hover{
background:#FFD61B;
}
.img_50{
width: 50%;
margin: 10px auto;
}
.img_60{
width: 60%;
margin: 10px auto;
}
.img_65{
width: 65%;
margin: 10px auto;
}
.img_50 img,.img_60 img,.img_65 img,.img_box img {
width:100%;
}
.img_box{
width: 80%;
margin: 10px auto;
}
.img_box01{
  width: 60%;
  margin: 10px auto;
}
.col-sm-3{
width: 75%;
margin: 10px auto;
}
.input-group-addon{
background: #FFFFFF;
border: none;
font-weight: bold;
vertical-align: bottom;
}

/* index.php 確認事項  */
.kakunin_flex{
  display: flex;
  flex-direction: column;
}

/* Chrome、Safari  */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none; 
margin: 0;  
}  
/* Firefox、IE  */
input[type="number"] {  
-moz-appearance:textfield;
}
::placeholder {
 color: #ddd;
}
input.license, input.license2{
width:50%;
font-size: 40px;
font-weight: bold;
margin: 5px auto;
padding: 5px 10;
}
/*input.license2 {
background-color: #fff1fe;
}*/
.radio_box{
width: 95%;
margin: 20px auto;
}
.cyui{
margin: 10px 0;
color: #FF0000;
font-size: 130%;
}
.pdb10{
padding-bottom: 10px;
}
.pdb15{
padding-bottom: 15px;
}
.te_center{
text-align: center;
}
.ma_auto{
margin:  0 auto;
}
.division {
font-size: 30px;
padding-left:8px;
font-weight: bold;
}
.ll_radio {
width: 1.4em;
height: 1.4em;
}
.sel_class{
font-size: 25px;
padding-left:8px;
font-weight: bold;  
}
.gu_re{
position: relative;
}
.license_guide{
font-weight: 700;
font-size: 25px;
width: 10%;
margin: 0 auto;
padding: 0 5px;
}
.OpeningWin{
width:80%;
padding: 20px;
margin: 20px auto 70px;
}
.OpeningMsg{
font-size: 24px;
color: #EF002C;
font-weight: bold;
padding-bottom: 20px;
}
.OpeningMsg02{
font-size: 20px;
width: 90%;
margin: 10px auto;
font-weight: 600;
}
.button_opening{
font-size: 20px;
padding: 20px;
font-weight: bold;
width: 60%;
text-align: center;
background: #43A714;
border-radius: 10px;
margin: 50px auto;
color: #ffffff;
}
.button_opening:hover{
background: #FFF96C;
color: #138606;
}
.un_yello{
background: linear-gradient(transparent 60%,#F1F000 0%);
}
.xy_box{
font-size: 180%;
font-weight: bold;
text-align: left;
margin: 10px 0;
}
.xy_box span{
color: #F71616;
font-size: 130%;
/*border: solid 5px #F71616;
padding: 5px 10px;
background: #ffffff;
margin: 0 5px;

border-radius: 50%;
*/
}
.msg_aka{
font-size: 120%;
color: #EF0003;
font-weight: bold;
margin: 10px auto;
text-align: center;
}
/*テキスト記入欄*/
textarea[type='text']{
width: 80%;
padding: 8px 0 8px 5px;
transition: 0.3s;
font-size: 130%;
font-weight: bold;
color: #004B82;
}
textarea:focus{
color: #004B82;
font-weight: bold;
font-size: 150%;
background: #DEF9EA;
}
input[type="radio"] , input[type="checkbox"]{
-webkit-transform: scale(1.3);
transform: scale(1.3);
 margin-right: 0.3em;
}
footer{
background: #FFFFFF;
border-top: dotted 2px #22AAA3;
padding-bottom: 50px;
}
.footer_logo{
width: 30%;
margin: 20px auto 10px;
}
.footer_logo img{
width: 100%;
margin: 0 auto;
}
.footer_logo a:hover{
opacity: 0.6;
}
.TokyoNo{
width:350px !important;
}
.TokyoNoMsg{
font-size: 150%;
color: #ff0000;
}
.TokyoYesMsg{
font-size: 150%;
color: #0000ff;
}
.fo_90{
font-size: 90%;
}
.co_aka{
color: #ff0000;
}
.co_ao{
color: #0629F9;
}
.co_green{
color: #009E51;
}
.dots {
  -webkit-text-emphasis: filled;
  text-emphasis: filled;
}
.bbb{
font-weight: bold;
}
@media screen and (max-width: 890px) { 
.main_cont{
width: 90%;
}
.flex_20{
width: 60%;
margin: 8px auto;
}
.flex_50,.flex_65{
width:90%;
}
.flex_40,.flex_35{
width: 85%;
margin: 0 auto;
}
.flex_60{
width: 90%;
margin: 0 auto;
}
.flex_30{
width: 60%;
margin: 0 auto;
}
.img_90{
width: 80%;
}
.radio_box{
width: 98%;
}
.division {
font-size: 20px;
}
.question_msg {
font-size: 28px;
}
}
@media screen and (max-width:890px) {
 span.aks {
display: inline-block;
}
}
@media screen and (max-width:850px) {
.main_cont{
margin: 0px auto 70px;
border: 5px solid #3E2175;
padding: 10px;
top: -90px;
}
.flex_box,.flex_box03{
flex-direction: column;
margin: 10px auto;
width: 100%;
}
.flex_select,.flex_select2{
flex-direction: row;
}
.flex_stretch{
align-items: center;
}
.popup_flex{
flex-direction: row;
}
.col-sm-3{
width: 80%;
margin: 10px auto;
}
.flex_30{
width: 65%;
margin: 0 auto;
}
.kakunin_box{
width: 70%;
}
.OpeningWin{
width:90%;
padding: 20px;
margin: 20px auto 70px;
}
.flex_70{
width: 90%;
}
.OpeningMsg{
font-size: 22px;
}
.OpeningMsg02{
font-size: 18px;
width: 95%;
}
.button_opening{
font-size: 20px;
padding: 15px 0;
width: 80%;
}

input.license, input.license2{
width:25%;
font-size: 30px;
}
.xy_box{
font-size: 120%;
font-weight: bold;
text-align: center;
}
.license_guide{
font-size: 15px;
}
input[type="radio"] , input[type="checkbox"]{
-webkit-transform: scale(1.1);
transform: scale(1.1);
 margin-right: 0.1em;
}
footer{
background: #FFFFFF;
border-top: dotted 2px #22AAA3;
}
.footer_logo{
width: 60%;
margin: 20px auto 10px;
}
.footer_logo img{
width: 100%;
margin: 0 auto;
}
.msg_box{
margin: 10px auto;
font-size: 180%;
padding: 10px 0;
}
.msg_box02{
margin: 30px auto 5px;
line-height: 1.5;
font-size: 130%;
}
.cyui{
margin: 10px 0;
font-size: 110%;
}
.button_general {
font-size: 140%;
width: 98%;
}
textarea[type='text']{
width: 90%;
font-size: 120%;
}
}
@media screen and (max-width:489px) {
.main_cont{
width: 97%;
margin: 0px auto 60px;
padding: 10px 7px;
border: 2px solid #3E2175;
top:-60px;
}
.popup_flex{
flex-direction: column;
}
.img_box{
width: 90%;
}
.kakunin_box{
width: 90%;
}
header{
padding: 10px 0 50px;
}
h1{
font-size: 150%;
padding: 0 0 5px 0;
margin: 0 auto;
}
h2{
margin: 5px auto;
font-size: 110%;
text-indent: -2.5rem;
padding-left: 3rem;
}
.question_msg {
font-size: 21px;
padding: 10px 0;
}
.msg_box01{
margin: 0px auto 10px;
font-size: 120%;
padding: 0 0 0 20px;
text-indent: -2.5rem;
padding-left: 2rem;
} 
.msg_box01:before {
content: url("../img/cyuui_mark_sp.png");  
top:3px;      
left:0;    
} 
.msg_box011{
margin: 0px auto 10px;
font-size: 120%;
padding: 0 0 0 20px;
text-indent: -2.5rem;
padding-left: 2rem;
} 
.msg_box011:before {
content: url("../img/cyuui_mark_sp.png");  
top:3px;      
left:0;    
} 
.msg_box0111{
margin: 0px auto 10px;
font-size: 120%;
padding: 0 0 0 20px;
text-indent: -2.5rem;
padding-left: 2rem;
} 
.msg_box0111:before {
content: url("../img/cyuui_mark_sp.png");  
top:3px;      
left:0;    
}
.btn_box{
margin: 10px auto;
flex-direction: column;
width: 85%;
}
.btn_box02{
width: 95%;
}
.flex_box02{
margin: 10px auto;
width: 98%;
}
.flex_20{
width: 70%;
margin: 2px auto 5px;
}
.flex_30,.flex_35,.flex_40,.flex_50,.flex_60,.flex_65,.flex_90,.flex_75{
width: 95%;
}
.flex_70{
width: 98%;
}
.flex_box05{
width: 100%;
}
.flex_30{
width: 80%;
margin: 0 auto;
}
.input-group-addon{
font-size: 90%;
padding: 6px 3px;
}
.col-sm-3{
width: 95%;
margin: 8px auto;
}
.radio_box{
width: 98%;
}
.division {
font-size: 18px;
}
.sel_class{
font-size: 18px;
}
.OpeningWin{
width:90%;
padding: 20px 0;
}
.msg_box{
font-size: 135%;
margin: 10px auto 0;
padding: 10px 0 0 0;
}  
.msg_box02{
font-size: 120%;
}    
input.license, input.license2{
width:26%;
font-size: 20px;
}
.cyui{
font-size: 100%;
}
.img_60{
width: 80%;
margin: 10px auto;
}
.msg_box03{
line-height: 1.4;
font-size: 120%;
}
.flex_select{
flex-direction: column;
}
.button_general {
font-size: 120%;
}
.button_general02 {
letter-spacing: -0.1em;
}
.popup_btn {
margin: 10px auto ;
} 
textarea:focus{
font-size: 120%;
}
textarea[type='text']{
width: 95%;
font-size: 115%;
}
}
@media screen and (max-width:350px) {
.button_general {
font-size: 110%;
width: 100%;
}
    
}
#DispAge {
font-size: 50px;
color: #0000ff;
}

#dnumber {
width: 200px;
font-size: 50px;
text-align: right;
}





