@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: FontAwesome,Linotte,YuGothic,"Yu Gothic",游ゴシック体,游ゴシック,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Roboto,メイリオ,Meiryo,"ＭＳ Ｐゴシック",Osaka,"MS PGothic",Arial,Helvetica,Verdana,sans-serif !important;
}

*::-webkit-input-placeholder {
  color: #777;
}

*::-moz-placeholder {
  color: #777;
}

.clearfix {
  zoom: 1;
  clear: both;
}
.clearfix:after {
  display: block;
  height: 0;
  visibility: hidden;
  content: "\0020";
  clear: both;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent no-repeat center center;
    background-size: contain;
    font-weight: inherit;
}
html {
  max-width: 100%;
  margin: 0 auto;
  font-family: FontAwesome,Linotte,YuGothic,"Yu Gothic",游ゴシック体,游ゴシック,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Roboto,メイリオ,Meiryo,"ＭＳ Ｐゴシック",Osaka,"MS PGothic",Arial,Helvetica,Verdana,sans-serif !important;
  overflow-x: hidden;
  overflow-y:scroll;
}


html{
  /* 1rem = 100pxと定義 */
  font-size: 100px;
}
body{
  /*　基本のフォントサイズは16px */
  font-size: 0.16rem;

}

h1{
  /* 見出しは大きめの30px、パディングを20px*/
  font-size: 0.3rem;
  padding: 0.2rem;
}
p{
  /* pはマージントップ40px */
  margin-top: 0.4rem;
  font-size:0.35rem;
}
p.text1{
  margin-top: 0.4rem;
  font-size:0.24rem;
}
p.text2{
  margin-top: 0.2rem;
    font-size: 0.24rem;
    line-height: 1.4;
    padding: 4%;
    border: 1px solid #5e5e5e5c;
}
/* ↓スマホ（横幅550px以下）の場合 */
@media screen and (max-width: 550px) {
  html{
    /* 1rem = 50pxと再定義 */
    font-size: 50px;
  }
  body{
    /* フォントサイズを少し小さく14pxに（50px * 0.28rem = 14px） */
    font-size: 0.28rem;
  }
  h1{
    /* 見出しのサイズを少し小さく20pxに（50px * 0.4rem = 20px） */
    font-size: 0.35rem;
    /* パディングはPCの半分の10pxにしますが、ここで何も指定しなくても50px * 0.2rem = 10pxに自動で再計算されるはず */
  }
  p{
  /* マージントップはPCの半分の20pxにしますが、ここで何も指定しなくても、50px * 0.4rem = 20pxに自動で算出されるはず */
  }
}

body {
  margin: 0;
  max-width: 100%;
  width: 100%;

}
#all{
	background:url("../img/a_bg.png") top / auto no-repeat;
	background-attachment: fixed;
}

div.container {
  max-width: 100%;
  overflow-x: hidden;
  width: 100%;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
}

a {
  color: #333;
  outline: none;
  cursor: pointer;
  text-decoration: underline;
  -moz-transition: opacity 0.2s ease-in-out 0.1s;
  -o-transition: opacity 0.2s ease-in-out 0.1s;
  -webkit-transition: opacity 0.2s ease-in-out;
  -webkit-transition-delay: 0.1s;
  -webkit-transition: opacity 0.2s ease-in-out 0.1s;
  transition: opacity 0.2s ease-in-out 0.1s;
  opacity: 1;
}
a img {
  vertical-align: bottom;
}
a:hover {
  opacity: 0.8;
}
.p_1{
	color: #FFFFFF;
	padding:10%;
	
}
img {
  max-width: 100%;
  display: block;
  margin: auto auto;
	width: 100%;
    height: auto;}

div.clearfix {
  zoom: 1;
  clear: both;
}
div.clearfix:after {
  display: block;
  height: 0;
  visibility: hidden;
  content: "\0020";
  clear: both;
}

h1 {
  font-size: 2.5em;
  line-height: 1.3em;
}

h2 {
  font-size: 2em;
  line-height: 1.4em;
}

h3 {
  font-size: 1.5em;
  line-height: 1.4em;
}
#main-wrapp {
/* background: no-repeat url("../img/bg.jpg");
  background-attachment: fixed;
 text-align: center;*/
}
#page-wrapper{
	max-width:750px;
	width:100%;
	margin:auto;
	box-shadow: 0 1.9px 2.5px rgba(0, 0, 0, 0.057),
    0 5px 6.1px rgba(0, 0, 0, 0.076),
    0 10.1px 11.4px rgba(0, 0, 0, 0.086),
    0 19.2px 19.8px rgba(0, 0, 0, 0.092),
    0 38.4px 34.8px rgba(0, 0, 0, 0.1),
    0 101px 74px rgba(0, 0, 0, 0.13);
	position: relative;
	overflow: hidden;
}
#page-wrapper img{
	width:100%;
}
.relative{
	position: relative;
}
#fv_top{
	width: 100%;
    max-width: 750px;
    margin: auto;
	position: relative;
}
.fv_top_text1{
	margin: auto !important;
    top: 71%;
    left: 0;
    right: 0;
    position: absolute;
	width: 74%;
    max-width: 550px;
	z-index: 9999;
}
.fv_top_text2{
    top: 111%;
    left: 0;
    position: absolute;
	width: 100%;
	z-index: 9999;
}
.fv_text1{
	position: absolute;
	top:4%;
	left:0;
	right:0;
	width: 95%;
    margin: auto;
}
.fv_repeat{
	position: absolute;
    bottom: -9%;
    left: 4%;
    width: 58%;
    z-index: 9999999;
}
.fv_tennen{
    position: absolute;
    bottom: -10%;
    right: 0%;
    width: 36%;

}
#fv{
    position: relative;
    width: 100%;
    max-width: 750px;
    margin: auto;
	z-index:1000;
}
.fv .video {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 21%;
    z-index: 5;
	
}
.video_after{
	background: #04519f;
	padding-bottom:39%;
}
.video_after::before {
  content: "";
  display: block;
  padding-top:194%;
}
.video_after2{
	padding-bottom:25%;
}
.video_after2::before {
  content: "";
  display: block;
  padding-top:194%;
}
.fv .video video{
	width:100%;
}
#hatu{
    position: absolute;
    left: 5%;
    right: 0;
    width: 90%;
    top: 3%;
}
#koko{
position: absolute;
    left: 15%;
    right: 15%;
    width: 70%;
    top: 6%;
}
#kantan{
    position: absolute;
    left: 15%;
    right: 0;
    width: 70%;
    top: -5%;
}
#pa{
position: absolute;
    left: 4%;
    right: 5px;
    width: 10%;
    top: 16%;
}
#tubu{
    position: absolute;
    left: 4%;
    width: 88%;
    top: 11%;
}
#care{
position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    top: 74%;
}
#nayami1{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    width: 90%;
    top: 35%;
}
#nayami2{
position: absolute;
    margin: auto;
    left: 0%;
    right: 0;
    width: 90%;
    top: 72%;
}
#kedo1{
position: absolute;
    margin: auto;
    left: 0%;
    right: 0;
    width: 32%;
    top: 24%;
}
#kedo2{
position: absolute;
    text-align: center;
    margin: auto;
    right: 0;
    left: 0;
    width: 100%;
    top: 32.5%;
}
#over1{
position: absolute;
    margin: auto;
    left: 0%;
    right: 0;
    width: 90%;
    top: 12%;
}
#over2{
    position: absolute;
    margin: auto;
    right: 8%;
    width: 40%;
    top: 36.5%;
}
#over3{
    position: absolute;
    margin: auto;
    right: 8%;
    width: 40%;
    top: 70%;
}

#ome1{
    position: absolute;
    margin: auto;
    width: 100%;
    top: 31.0%;
}
#ome1-2{
    position: absolute;
    margin: auto;
    width: 100%;
    top: 31.0%;
}
#ome2{
    position: absolute;
    margin: auto;
    width: 100%;
    top: 60%;
}
#ome2-2{
    position: absolute;
    margin: auto;
    width: 100%;
    top: 60%;
}
#ome3{
    position: absolute;
    margin: auto;
    width: 100%;
    bottom:1%;
}
#ome3-2{
    position: absolute;
    margin: auto;
    width: 100%;
    bottom:1%;
}
#toru1{
    position: absolute;
    margin: auto;
    right: 7%;
    width: 47%;
    top: 30%;
}
#muzu{
	background: #eaeaea;
	width:100%;
	padding-top:237%;
}
#toru2{
position: absolute;
    margin: auto;
    right: 7%;
    width: 47%;
    top: 64%;
}
#lisk{
    position: absolute;
    margin: auto;
    left: 0%;
	right:0;
    top: 0%;
    width: 80%;	
}
#lisk1{
    position: absolute;
    margin: auto;
    left: -3%;
    top: 9%;
    width: 44%;
	
}
#lisk2{
    position: absolute;
    margin: auto;
    right: 29%;
    top: 9%;
    width: 33%;
    z-index: 10001;
}
#lisk3{
    position: absolute;
    margin: auto;
    right: 1%;
    top: 10%;
    width: 34%;
    z-index: 9999;
	
}
#lisk4{
position: absolute;
    margin: auto;
    left: 0%;
    right: 0;
    top: 20%;
    width: 92%;
    z-index: 10008;
	
}
#muzu1{
position: absolute;
    margin: auto;
    width: 100%;
    top: -4%;
}
#muzu2{
position: absolute;
    margin: auto;
    width: 100%;
    top: 15%;
}
#muzu3{
position: absolute;
    margin: auto;
    width: 100%;
    top: 34%;
}
#muzu4{
position: absolute;
    margin: auto;
    width: 100%;
    top: 53%;
}
#muzu5{
position: absolute;
    margin: auto;
    width: 100%;
    top:73%;
}
#koe1{
position: absolute;
    margin: auto;
    width: 100%;
    top:17%;
}
#yasasisa{
    position: absolute;
    margin: auto;
    width: 103%;
    top: 23%;
    left: 2%;
}
#yasasisa2{
position: absolute;
    margin: auto;
    width: 97%;
    top: 3%;
    left: 0;
    right: 0;
}
#yasasisa3{
    position: absolute;
    margin: auto;
    width: 81%;
    top: 56%;
    left: 0%;
    right: 0%;
}
#yasasisa4{
right: 0;
    position: absolute;
    margin: auto;
    width: 80%;
    bottom: 5%;
    left: 0;
}
.fv .takame{
	position:absolute;
	top:0px;
	z-index: 10;
}
.sukina{
	position: absolute;
    top: -167px;
    z-index: 9999;
	
}
.maeni{
	position: absolute;
    top: -83px;
    z-index: 9999;
	
}
.d-demo {
    position: relative;
    margin-top: 0%;
    z-index: 1;
    height: calc(800 / 750 * 100%);
    background: #edefee;
	
}
.d-demo2 {
	position: relative;
    margin-top:3%;
	z-index: 1;
	height: calc(800 / 750 * 100%);
	
}

@media only screen and (max-width: 959px) {
.d-demo {

    margin-top:0%;
	
}
.d-demo2 {

    margin-top:15%;
	
}
.sukina{
    top: -37%;
	
}
	.maeni{
	position: absolute;
    top: -135px;
    z-index: 9999;
}
}



@media only screen and (max-width: 550px) {
.d-demo {

    margin-top:0%;
	
}
.d-demo2 {

    margin-top:15%;
	
}
.sukina{
    top: -16%;
	
}
		.maeni{
	position: absolute;
    top: -65px;
    z-index: 9999;
}
}



.konna{
	width:90%;
	margin:auto;
}
.risk{
	background: #3d3b3b;
}
.minaosi{
	background: #e0f0fb;
    background-size: 100% auto;
    z-index: 1;
    width: 95%;
    margin: auto;
}


.video_contain1 video{
	width:100%;
}
.video_contain1 #video2{
	width:100%;
}
.video_contain2 {
	width:90%;
	margin:auto;
}
.video_contain2 video{
	width:100%;
}
.video_contain2 #video2{
	width:100%;
}
.demo{
	width:40%;
	margin:-5% auto 0;
}
.demo img{
}
.salt{
	background: url("../img/salt_bg.jpg") repeat-y;
	background-size: 100% auto;
	z-index: 1;
	padding-bottom: 13%;
}
.salt p{
	width:80%;
	font-size:16px;
	margin:auto;
}
.gohandemo {
	margin:-10% auto 0;
}
.gohan{
	background: url("../img/bg_gohan.jpg") repeat-y;
	background-size: 100% auto;
    margin-top: -17%;
    padding-top: 13%;
}
.gohan img{
	width:96%;
	padding-left:2%;
}
.gohan2{
	background: url("../img/bg_gohan2.jpg") repeat-y;
	background-size: 100% auto;
    margin-top: -17%;
    padding-top: 13%;
	padding-bottom:10%;
}
.kenko_all{
	width:100%;
	position:relative;
}
.kenko{
	/*background: url("../img/kenko.jpg")  center center / cover no-repeat;
	padding-top: calc(1572 / 750 * 100%); 
	width:100%;
	height:0;*/
	background: url("../img/kenkomini.jpg")  center center / cover no-repeat;
	padding-top: calc(1208 / 750 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	width:100%;
	height:0;
}

.kenko1{
	width: 89% !important;
    position: absolute;
    top: 6%;
    padding-left: 10%;
}
.kenko2{
	width: 92% !important;
    position: absolute;
    top: 36%;
    padding-left: 30%;
	
}
.kenko3{
	width: 60% !important;
    position: absolute;
    top: 78%;
    padding-left: 8%;
	
}
.sikumi{
	background: #f0f6fa;
    z-index: 1;
	padding-bottom:15%;
}
.siken{
	background: url("../img/bg_siken.jpg")  center center / cover repeat-y;
    z-index: 1;
	padding-bottom:15%;
}
.siken .siken_in {
	width:90%;
	background: #FFFFFF;
	margin:auto;
	padding:2% 2% 12%;
}
.siken .siken_in p{
	text-align: left;
}
.item01 {
    width: 94% !important;
    padding: 10% 0 5%;
    margin: auto;
}
.item02 {
    width: 98% !important;
    padding: 10% 0;
    margin: auto;
}
.item03 {
    width: 95% !important;
    padding: 5% 0;
    margin: auto;
}
.dakara {
	margin:-10% auto 0;
	width:70%;
}

.saport{
	padding: 10%;
}

.btn_position_001 {
    position: absolute;
    width: 80%;
    bottom: 9%;
    left: 9.5%;
}
.btn_position_002 {
    position: absolute;
    width: 82%;
    bottom: 2%;
    left: 8.5%;
}

#footer{
	width:100%;
}
.fotter_inner{
	width:90%;
	margin:auto;
	text-align: center;
}
#footer .fotter_inner ul {
    margin: 20px 0;
}
#footer .fotter_inner ul li:first-child {
    border-left: none;
}
#footer .fotter_inner ul li {
    display: inline-block;
    padding: 5px;
    border-left: 1px solid #2A2A2A;
}
#footer .copy {
    background: #0353a3;
    color: #fff;
    line-height: 1;
    text-align: center;
    padding: 13px 0;
    margin: 40px 0 0 0;
}

.offer_botan1{
	position: absolute;
    width: 90%;
    top: 66%;
    left: 5%;
}
.offer_botan2{
	position: absolute;
    width: 85%;
    bottom: 7%;
    left: 8%;
}

.atten1{
	position: absolute;
    width: 12px;
    top: 35%;
    left: 34%;
}
.atten2{
    position: absolute;
    width: 12px;
    bottom: 8%;
    right: 25%;
}
.atten3{
    position: absolute;
    width: 12px;
    bottom: 57%;
    right: 68%;
}
.atten4{
    position: absolute;
    width: 12px;
    top: 1.5%;
    left: 31%;
    z-index: 100;
}
.atten5{
    position: absolute;
    width: 12px;
    top: 55.5%;
    left: 22%;
    z-index: 100;
}
.atten6{
position: absolute;
    width: 12px;
    top: 3.5%;
    left: 57%;
    z-index: 100;
}
.atten7{
    position: absolute;
    width: 12px;
	top: 41.5%;
    left: 51%;
    z-index: 100;
}
.atten8{
    position: absolute;
    width: 12px;
    top: 61%;
    left: 21%;
    z-index: 100;

}

@media only screen and (max-width: 550px) {

.atten1,.atten2,.atten3,.atten4,.atten5,.atten6,.atten7,.atten8{
	width: 8px;
}
}