article, aside, canvas, details, figcaption, figure, header, footer, main, menu, nav, section, summary {
display : block;
box-sizing : border-box;
}
body {
font-family : "Meiryo", Arial, sans-serif;
height : 100%;
font-size : 62.5%;
line-height : 2.2em;
letter-spacing : 0.1em;
}
@media screen and (min-width:1000px) {
html {
font-size : 1.7em;
}
}
@media screen and (max-width:999px) {
html {
font-size : 1.6em;
}
}
.wrapper {
width : 100%;
max-width : 850px;
padding-left : 3px;
padding-right : 3px;
text-align : center;
margin : 0 auto 20px auto;
}
a:link {
color : #0105D2;
}
a:visited {
color : #059A76;
}
a:hover {
color : #B90000;
}
a:active {
color : #E0C408;
}
.div1 {
margin : 0 auto 0 auto;
text-align : center;
}
.div2 {
margin : 0 auto 0 auto;
text-align : left;
}
.div3 {
margin : 0 auto 0 auto;
text-align : right;
}
.no-gutter > [class*="col-"] {
padding-right : 0;
padding-left : 0;
}
.gutter > [class*="col-"] {
padding-right : 5px;
padding-left : 5px;
}
.boxcontainer2 {
position : relative;
display : block;
display : flex;
flex-direction : row;
flex-flow : row;
overflow : hidden;
flex-wrap : wrap;
box-sizing : border-box;
justify-content : space-around;
width : 100%;
max-width : 900px;
height : auto;
margin : 0 auto 0 auto;
background-color : transparent;
border-collapse : collapse;
text-align : left;
}
.boxcontainer4 {
position : relative;
width : 100%;
max-width : 900px;
height : auto;
background-color : #FFFFFF;
border : #03B6FF solid 1px;
border-radius : 8px;
margin : 0 auto 0 auto;
display : block;
flex-direction : row;
flex-flow : row;
align-items : stretch;
overflow : hidden;
flex-wrap : wrap;
border : solid #03B6FF 1px;
text-align : left;
}
.boxcontainer5 {
position : relative;
width : 100%;
max-width : 900px;
background-color : #FFFFFF;
border-collapse : separate;
padding : 10px;
margin-left : auto;
margin-right : auto;
margin-top : 5px;
border-radius : 8px;
}
.boxcontainer6 {
width : 100%;
text-align : left;
border-collapse : collapse;
padding-left : 5px;
padding-top : 5px;
background-color : #FFFFFF;
border : #AEDAF2 solid 4px;
margin : 0 auto 0 auto;
border-radius : 8px;
}
.boxcontainer7 {
position : relative;
width : 100%;
max-width : 370px;
display : flex;
flex-direction : row;
flex-flow : row;
box-sizing : border-box;
justify-content : space-around;
background-color : #FFFFFF;
border-collapse : collapse;
padding : 2px;
margin-left : auto;
margin-right : auto;
text-align : left;
}
.boxcontainer8 {
position : relative;
width : 100%;
text-align : left;
background-color : #FFED49;
border : #66E309 solid 1px;
padding : 1px 5px 1px 5px;
margin : 0 auto 5px auto;
border-radius : 8px;
}
.boxcontainer9 {
position : relative;
display : block;
flex-direction : row;
flex-flow : row;
align-items : stretch;
overflow : hidden;
flex-wrap : wrap;
width : 100%;
max-width : 900px;
height : auto;
margin : -10px auto 0 auto;
background-color : #66E309;
text-align : left;
}
.boxcontainer10 {
width : 100%;
max-width : 900px;
height : auto;
padding-top : 10px;
padding-left : 20px;
padding-right : 15px;
margin : 0 auto 0 auto;
background-color : #FFFFFF;
position : relative;
text-align : left;
overflow : hidden;
display : block;
border-radius : 8px;
}
.boxcontainer11 {
position : relative;
display : inline-block;
box-sizing : border-box;
overflow-wrap : break-word;
overflow : hidden;
width : 100%;
max-width : 900px;
height : auto;
background-color : #E0FF0D;
border : #FFCC00 solid 2px;
margin : 0 auto 0 auto;
border-radius : 7px;
}
.boxcontainer12 {
width : 100%;
max-width : 450px;
height : auto;
background-color : transparent;
margin : 0 auto 0 auto;
position : relative;
}
.boxcontainer13 {
width : 100%;
max-width : 450px;
height : auto;
background-color : transparent;
margin : 0 auto 0 auto;
position : relative;
background-image : url(img/lucky3.png);
background-repeat : no-repeat;
background-position : right bottom;
background-position : 99% 10%;
}
.boxcontainer14 {
width : 100%;
max-width : 450px;
height : auto;
background-color : transparent;
margin : 0 auto 0 auto;
position : relative;
background-image : url(img/cosmos2.png);
background-repeat : no-repeat;
background-position : right bottom;
background-position : 100% 100%;
}
.boxcontainer15 {
width : 100%;
max-width : 900px;
height : auto;
background-color : #CCCCFF;
vertical-align : middle;
margin : 0 auto 0 auto;
}
.boxcontainer16 {
position : relative;
display : inline-block;
box-sizing : border-box;
overflow-wrap : break-word;
overflow : hidden;
width : 100%;
max-width : 900px;
height : auto;
background-color : #E0FF0D;
margin : 0 auto 0 auto;
}
.gutter > [class*="col-"] {
padding-right : 8px;
padding-left : 8px;
}
.box1 {
position : relative;
display : inline-block;
width : 100%;
max-width : 900px;
height : auto;
margin : 0 auto 0 auto;
}
.box2 {
width : 100%;
background-color : #D0FFFA;
border-collapse : collapse;
padding-left : 10px;
padding-right : 10px;
padding-bottom : 5px;
text-align : left;
}
.box3 {
position : absolute;
left : 50%;
margin : 0.5em 0 0 -110px;
}
.box4 {
width : 100%;
max-width : 900px;
height : auto;
background-color : #FFFFFF;
position : relative;
display : inline-block;
box-sizing : border-box;
overflow-wrap : break-word;
overflow : hidden;
float : left;
}
.box7 {
width : 100%;
max-width : 900px;
height : auto;
background-color : #FFCC00;
vertical-align : middle;
}
.box8 {
width : 100%;
max-width : 900px;
height : auto;
background-color : #FFFFFF;
vertical-align : middle;
}
.box9 {
width : 100%;
max-width : 900px;
height : auto;
background-color : #FFFFFF;
padding : 5px 10px 5px 10px;
position : relative;
display : inline-block;
box-sizing : border-box;
overflow-wrap : break-word;
overflow : hidden;
margin : 0 auto 0 auto;
background-image : url(img/manycosmos.png);
background-repeat : no-repeat;
background-position : right bottom;
background-position : 100% 86%;
margin-bottom : -150px;
padding-bottom : 150px;
}
.box10 {
width : 100%;
max-width : 900px;
height : auto;
background-color : #FFFFFF;
padding : 5px 10px 5px 10px;
position : relative;
display : inline-block;
box-sizing : border-box;
overflow-wrap : break-word;
overflow : hidden;
margin : 0 auto 0 auto;
background-image : url(img/backpicture2.jpg);
background-repeat : no-repeat;
background-position : 0 0;
}
.container:before, .container:after {
content : "";
display : table;
}
.container:after {
clear : both;
}
.gradation1 {
width : 100%;
max-width : 150px;
min-width : 110px;
height : auto;
text-align : center;
background : linear-gradient(#FFFB94, #B6DB15);
border-radius : 10px;
margin-right : 10px;
padding-top : 2px;
margin-bottom : 3px;
box-shadow : 1px 1px 1px rgba(0, 0, 0, 0.4);
float : left;
}
.gradation2 {
width : 100%;
max-width : 203px;
min-width : 200px;
text-align : center;
background : linear-gradient(#FFFFFF, #E8C612);
border-radius : 5px;
padding-top : 3px;
margin-top : 0;
margin-bottom : 10px;
}
.gradation3 {
width : 100%;
max-width : 89px;
height : auto;
text-align : center;
background : linear-gradient(#FFFFFF, #072CDA);
border-radius : 5px;
display : inline-block;
}
.gradation4 {
width : 100%;
max-width : 320px;
min-width : 220px;
height : auto;
text-align : center;
background : linear-gradient(#FFFFFF, #E8C612);
border-radius : 5px;
padding-top : 3px;
margin-bottom : 10px;
}
.indent1 {
text-indent : 1em;
}
.sentence1 {
text-indent : 1.0em;
margin-top : -0.9em;
}
h1 {
font-size : 50%;
font-weight : normal;
margin : 0 auto 0 auto;
}
h1 span {
display : none;
}
h2 {
font-size : 0.8em;
font-weight : bold;
margin : 0 auto 0 auto;
overflow-wrap : break-word;
}
h3 {
font-size : 0.9em;
font-weight : bold;
margin : 0 auto 0 auto;
overflow-wrap : break-word;
}
h4 {
font-size : 0.8em;
margin : 0 auto 0 auto;
overflow-wrap : break-word;
}
ul {
margin : 0 0 0 1em;
padding : 0;
}
.header1 {
position : relative;
width : 100%;
max-width : 800px;
height : auto;
line-height : 1;
padding : 5px 5px 5px 5px;
margin : 5px auto 5px auto;
border-radius : 4px;
text-align : left;
background : linear-gradient(#CCFFFF, #81D7FF);
overflow-wrap : break-word;
}
.title3 {
background-color : #FFCC00;
font-size : 1em;
border-style : solid;
border-color : #BEDDF5 #429BE3 #429BE3 #BEDDF5;
}
.itemsbody1 {
position : relative;
}
.sample1 {
font-size : 1.2em;
}
.sample2 {
font-size : 0.8em;
font-weight : normal;
}
.sample3 {
font-size : 0.6em;
}
.sample4 {
font-size : 1.1em;
font-weight : bold;
}
.sample5 {
font-size : 1.0em;
text-shadow : 2px 1px 3px #00C8FC;
}
.sample6 {
font-size : 0.9em;
font-weight : normal;
}
.sample7 {
font-size : 0.9em;
font-weight : bold;
}
.sample8 {
font-size : 1.2em;
font-weight : bold;
}
.sample9 {
font-size : 0.8em;
font-weight : bold;
}
.sample10 {
font-size : 1.0em;
font-weight : normal;
}
.sample11 {
font-size : 1.0em;
font-weight : bold;
}
.sample12 {
font-size : 0.7em;
font-weight : normal;
}
.sample13 {
font-size : 1.1em;
font-weight : normal;
}
.space1 {
margin-right : 1em;
}
.space2 {
margin-right : 0.3em;
}
.space3 {
margin-right : 0.5em;
}
.space4 {
margin-right : 0.7em;
}
video {
max-width : 100%;
height : auto;
}
.video1 {
position : absolute;
width : 900px;
}
.img-responsive1 {
width : 100%;
height : auto;
display : block;
}
.img-responsive2 {
width : 100%;
max-width : 102px;
height : auto;
background-color : transparent;
float : left;
margin : 0 10px 0 1px;
box-shadow : 3px 3px 3px rgba(0, 0, 0, 0.4);
}
.img-responsive3 {
width : 64px;
height : 98px;
background-color : transparent;
float : left;
margin : 0 5px 0 0;
box-shadow : 3px 3px 3px rgba(0, 0, 0, 0.4);
}
.img-responsive4 {
width : 54px;
height : 54px;
background-color : transparent;
float : left;
margin : 0 3px 0 3px;
}
.img-responsive5 {
width : 54px;
height : 54px;
background-color : transparent;
float : right;
margin : 0 3px 0 3px;
}