@charset "utf-8";
/*============
Base※触らない※
==============*/
body{
max-width:100%;
background:#fff;
color:#333;
font-size:62.5%;
line-height:1.7em;
letter-spacing:0.8px;
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
}
a{
color:#2580bd;
text-decoration:none;
}
a:hover{
color:#0d5b90;
}
a img:hover{
-ms-filter:"alpha(opacity=70)";
filter:alpha(opacity=70);
opacity:0.70;
}
img{
max-width:100%;
}

/*============
ClearFix
==============*/
.clear:after,.inr:after,/*ul:after,*/ol:after,section:after,#sec4 ol div:after,#app .price:after
{content:""; display:block; height:0; font-size:0; clear:both; visibility:hidden;}
.clear,.inr,ul,ol,section,#sec4 ol div,#app .price{zoom:1;}


/*============
Header
==============*/
#header{
width:100%;
padding:50px 0px 50px;
background:url(../img/mv.png) no-repeat #fff center 65% / cover;
color:#fff;
text-align:center;
font-size:2em;
line-height:2em;
    border-top: solid 15px #728c39;
    border-bottom: solid 5px #728c39;
}
#header h1{
margin:10px 0;
}
#header h1 img{
    width: 80vw;
max-width:500px;
    filter: drop-shadow(0 0 0.25rem #fff)
}
#header .btn{
display:inline-block;
width:200px;
height:54px;
text-align:center;
text-decoration:none;
line-height:54px;
outline:none;
}
#header .btn i{
padding:0 0 5px 5px;
font-size:20px;
vertical-align:middle;
}
#header .btn::before,
#header .btn::after{
position:absolute;
z-index:-1;
display:block;
content:'';
}
#header .btn,
#header .btn::before,
#header .btn::after{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition:all .3s;
transition:all .3s;
}
#header .btn{
background-color:#29437e;
/*border:2px solid #1f1f93;*/
color:#fff;
    border-radius: 5px;
    box-sizing: border-box
}
#header .btn:hover{
background-color:rgba(255, 255, 255, .2);
}

#header>span{
    text-indent: -10000px;
    display: block;
    height: 0px
}


/*Tablet
--------------*/
@media screen and (max-width:730px){
#header h1,
#header ul{
float:none;
}
}

/*============
footer
==============*/
footer{
padding:10px 20px;
background:#728c39;
color:#fff;
}
#pagetop{
position:fixed;
bottom:20px;
right:20px;
display:inline-block;
width:90px;
height:30px;
display: flex;
align-items: center;
    justify-content: flex-start;
    flex-direction: row-reverse;
background:#986c39;
color:#fff;
border-radius:3px;
text-align:center;
}

#pagetop span{
/*display:block;
font-size:.5em;
margin:-55px 0 0 0;*/
}

/*============
section
==============*/
section{
font-size:1.6em;
line-height:1.6em;
}
section .inr{
width:730px;
margin:0 auto;
}
section h2{
margin:80px 0 60px;
padding:10px 0;
    background: #728c39;
color:#fff;
font-size:1.3rem;
font-weight:bold;
text-align:center;
}
section h3{
margin:50px 0;
font-size:1.8em;
font-weight:bold;
text-align:center;
color:#986c39;
line-height:1.3em;
}
section table{
width:100%;
}
section th,section td{
padding:10px 0;
border-bottom:solid 1px #afafaf;
}
section tr:last-child th,
section tr:last-child td{
padding:10px 0 0;
border:none;
}
section th{
width:200px;
padding:0 20px 0 0;
font-weight:bold;
text-align:left;
}
section .red{
color:red;
}
section .small{
font-size:.8em;
}
section hr{
height:8px;
margin:50px 0;
border:0;
background:#bf9e53;
}
section .summary{
padding:40px;
border-radius:10px;
background:#efefef;
border:solid 2px #c3af83;
}
section .pr{
margin:30px 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
    

}
section .pr li{
    color: #000;
    width: 49%;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 15px;
    height: 100px;
/*position: relative;
float:left;
display:inline-block;
color:#FFF;
width:22%;
height:auto;
margin:0 10px;
border-radius:50%;
text-align:center;
vertical-align:middle;
overflow:hidden;
background-image:-webkit-linear-gradient(45deg, #709dff 0%, #91fdb7 100%);    
background-image:linear-gradient(45deg, #709dff 0%, #91fdb7 100%);
transition:.4s;
line-height:1.3em;
font-weight:bold;*/
}
section .pr li:before{
/*content:"";
display: block;
padding-top: 100%;*/
}
section .pr li:hover{
border: 3px solid #c3af83;
}

section .pr li:nth-of-type(1){
    background: #fff url(../img/world.jpg) 0 -10px/cover no-repeat;
}

section .pr li:nth-of-type(2){
    background: #fff url(../img/japan.jpg) 0 -30px/cover no-repeat;
}

section .pr li:nth-of-type(3){
    background: #fff url(../img/eggs.jpg) 0 55%/cover no-repeat;
}

section .pr li:nth-of-type(4){
    background: #fff url(../img/summary_01.jpg) 70% 0/contain no-repeat;
}

section .pr li span{
    /*background: rgba(61, 114, 74, 0.7);*/
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px;
    font-weight: bold;
    color: #3d5c72;
    background-image:linear-gradient(45deg, #fff3d8 0%, rgba(39, 95, 52, 0.58) 100%);
    text-shadow: 1px 1px 2px #999;
/*position: absolute;
top: 36%;
display: block;
width: 100%;
text-align: center;*/
}
/*section .pr li:nth-child(4) span{top:30%;}*/
section figure{
margin:30px 0 0;
text-align:center;
}
section figcaption{
text-align:left;
font-size:1.2em;
}
section figcaption:before{
content:"";
display:inline-block;
width:5px;
height:24px;
margin:0 8px 0 0;
padding:5px 0 0 0;
background:#999;
vertical-align:middle;
}
section .note{
margin:30px 0 0;
}
section .note dt{
margin:0 0 20px;
font-size:1.4em;
color:#fff;
    background: #3d5c72;
    padding: 10px;
    border-radius: 3px
}
section .note dt:before{
font-family:'Material Icons';
content:"\e037";
vertical-align:bottom;
color:#2dcce8;
font-size:.8em;
}

#sec1 h2{
margin:20px 0 60px;
}
#sec1 .pick{
display:block;
margin:5px 0;
padding:5px 10px;
background:#3d724a;
color:#fff;
text-shadow:3px 3px 3px #333;
font-size:1.2em;
}
#sec2 h4{
margin:0 0 30px;
font-size:1.2em;
font-weight:bold;
text-align:center;
color:#3977ab;
}
#sec2 h5{
margin:40px 0;
font-size:1.5em;
font-weight:bold;
color:#986c39;
}
#sec2 h5 span{
display:inline-block;
margin:0 15px 10px 0;
padding:5px 10px;
background:#728c39;
font-size:.7em;
border-radius:17px;
color:#fff;
}
#sec2 th{
width:220px;
}
#sec2 .pick{
display:inline-block;
margin:5px 0;
padding:5px 10px;
background:#82bae6;
color:#fff;
    font-weight: bold;
/*text-shadow:3px 3px 3px #333;*/
font-size:1.2em;
    border: 2px solid #3c7db1;
}
#sec3 .pick{
display:block;
margin:5px 0;
padding:5px 10px;
background:#3d724a;
color:#fff;
text-shadow:3px 3px 3px #333;
font-size:1.2em;
}
#sec4 ol li{
position:relative;
margin:0 0 50px;
border:solid 3px #3d724a;
}
#sec4 ol li:after{
position:absolute;
bottom:-34px;
left:50%;
content:"▼";
display:block;
margin: 0 0 0 -35px;
text-align:center;
font-size:3.5em;
color:#3d724a;
transform:scale(3,1);
}
#sec4 ol h4{
padding:10px 0;
background:#3d724a;
text-align:center;
color:#fff;
font-size:1.5em;
}
#sec4 ol .memo{
padding:10px 0;
background:#3d724a;
text-align:center;
color:#fff;
}
#sec4 ol div{
padding:20px;
}
#sec4 ol div p{
float:left;
width:70%;
}
#sec4 ol div figure{
float:right;
width:28%;
}

#support dl{
margin:40px 0 0;
border:solid 3px #c3af83;
}
#support dt{
width:100%;
padding:10px 0;
background:#c3af83;
color:#fff;
text-align:center;
font-size:1.5em;
}
#support .memo{
width:100%;
padding:10px 0;
background:#c3af83;
color:#fff;
text-align:center;
}
#support dd p{
padding:20px;
}
#sec5 .pick{
display:block;
margin:5px 0;
padding:5px 10px;
background:#3d724a;
color:#fff;
text-shadow:3px 3px 3px #333;
font-size:1.2em;
}
#receive{
margin:30px 0 30px;

}
#receive h4{
margin:0 0 15px;
color:red;
text-align:center;
}
#receive ol{
list-style:decimal;
list-style-position: inside;
    text-indent: -1.1rem;
    padding-left: 30px;
}
#receive #spec{
margin:30px 0;
}
.btn_doc{
display:block;
width:300px;
margin:50px auto;
padding:15px;
border:solid 2px #3d724a;
text-align:center;
font-weight:bold;
    color: #3d724a;
}

.btn_doc:hover{
border-style:dashed;
    color: #c3af83;
}
.btn_doc i{
padding:0 0 5px 5px;
font-size:20px;
vertical-align:middle;
}
#policy{
margin:30px 0;
padding:40px;
border-radius:10px;
background:#e6e6e6;
border:solid 2px #3d724a;
}
#policy dt{
margin:0 0 15px;
font-weight:bold;
}
#policy dd:not(:last-child){
margin:0 0 30px;
}

#doc table{
margin:60px 0 0;
}
#doc th,#doc td{
padding:5px;
border:solid 1px #afafaf;
}
#doc th{
background:#e8e8e8;
text-align:left;
vertical-align:middle;
}
#doc #policy{
margin:50px 0 100px;
}

#doc table caption{
font-size:1.2em;
position:relative;
margin:0 0 40px 0;
text-align:center;
font-weight:bold;
}
#doc table caption:before{
content:'';
position:absolute;
bottom:-15px;
display:block;
width:60px;
height:5px;
left:50%;
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
-ms-transform:translateX(-50%);
transform:translateX(-50%);
background:#3c7db1;
border-radius:2px;
}
#app{
padding:0 0 100px;
background:#f0f9ff;
}
#app h3 img{
width:500px;
    filter: drop-shadow(0 0 0.5rem #999);
}
#app .price dl{
display:table;
margin:0 0 20px;
border-bottom:solid 1px #cdeafd;
}
#app .price dt,
#app .price dd{
display:table-cell;
vertical-align:middle;
}
#app .price dt{
width:60px;
margin:0 10px 0 0;
padding:5px 10px;
background:#cdeafd;
text-align:center;
}
#app .price dd:first-of-type{
width:260px;
font-size:2.3em;
color:red;
font-weight:bold;
font-style:italic;
text-indent:20px;
}
#app .price dd:nth-of-type(2){
padding:0 0 17px;
}
#app .price dd span{
font-size:.7em;
color:#000;
font-weight:normal;
}
#app .price .btn{
clear:both;
display:block;
width:400px;
margin:30px auto;
padding:15px 20px;
border-radius:5px;
text-decoration:none;
color:#FFF;
background: #3d724a;
transition:.4s;
text-align:center;
font-size:1.8em;
}
#app .btn:hover{
background-image:-webkit-linear-gradient(45deg, #FFC107 0%, #f76a35 100%);
background-image:linear-gradient(45deg, #FFC107 0%, #f76a35 100%);
}
.btn_affiliate{
display:block;
margin:50px auto;
padding:15px;
border:solid 2px #3876a8;
text-align:center;
font-weight:bold;
}
.btn_affiliate:hover{
border-style:dashed;
}
.btn_affiliate i{
padding:0 0 5px 5px;
font-size:20px;
vertical-align:middle;
}


/*Tablet
--------------*/
@media screen and (max-width:730px){
section .inr{
width:98%;
margin:0 auto;
}
#sec2 th,
section th{
width:30%;
}
section .pr li{
width: 100%;
margin:0 10px 10px;
}
#app .price .btn{
width:95%;
}
#app .price dd:nth-of-type(2) {
padding:10px 0 17px;
}
#app .price dt, #app .price dd {
display:inline-block;
}
/*section .pr li{
width: 21%;
margin: 0 5px;
}*/
}
/*Tablet
--------------*/
@media screen and (max-width:420px){

section .pr li{

}
}