@charset "utf-8";
/* CSS Document */
html{
	width: 100%;
	font-family: "Yu Gothic",Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
	font-size: 18px;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x: hidden;
}

a:link {
    text-decoration: none;
	padding: 5px;
}


.page3_img {
	width: 40%;
	float: none;
}

.form_box {
	background-color: #f5f5f5;
	width: 90%;
	max-width: 800px;
	border-radius: 10px;
	padding: 20px 0;
	margin: 20px auto 0;
}

.comment_annotation {
	text-align: right;
	font-size: 0.6rem;
	color: #444444;
	margin-top: 10px;
}

.mailbtn {
	margin-top: 20px;
	height: 60px;
}

.mail{

	margin: auto;
}

.fv_bg{
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

.fv{
width: 100%;
max-width: 1080px;
object-fit: cover;
margin: 0 auto;
	}

.hilight{
	font-weight: bold;
	background: linear-gradient(transparent 70%, #F7D300 0%);
}

.mailform{
	width: 600px;
	height: 60px;
	font-size: 1.2rem;
	text-align: left;
	margin: 20px auto 10px;
}

@keyframes shiny {
    0% { left: -20%; }
    10% { left: 120%; }
    100% { left: 120%; }
}


.shiny-btn {
	margin: 0 auto;
    width: 100%;
	max-width: 500px;
    cursor: pointer;
    overflow: hidden;
	transition: 0.3s;
	animation: shiny-btn
	2000ms ease infinite;
	z-index: 3;
}

@keyframes shiny-btn {
  0%  { transform: scale(1); }
  15% { transform: scale(1.05); }
  30% { transform: scale(1); }
  45% { transform: scale(1.05); }
  70% { transform: scale(1); }
}

.shiny-btn:hover{
    opacity: 0.5;
}

.shiny-btn::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -20%;
    width: 20px;
    height: 100%;
    transform: scale(2) rotate(10deg);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);
    animation-name: shiny;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}


.center{
	width: 100%;
	max-width:800px;
	margin: 0 auto;
}


.red_text{
	font-weight: bold;
	color: #d91917;
}

.checklist{	
	max-width: 700px;
	width: 100%;
	margin: 10px auto;
	text-align: left;
	font-weight: 500;
	font-size: 1.3rem;
	background-color: #fff;
	padding: 5px;
}

.checkimg{
	position:relative;
	top: 5px;
	left: 0px;
}



.pink{
	font-size: 1.5rem;
	font-weight: bold;
	color: #035989;
	background: linear-gradient(transparent 70%, #ed9daf 70%);
}

.page3{
margin: 0 auto;
}

.page4{
	width: 100%;
	max-width: 1200px;
	padding: 2rem 0;
	margin: 8rem auto;
}

.page5{
	background-image: url("img/pc_bg_04.png");
	background-repeat: repeat;
	background-position: center;
	background-size: cover;
}

.title_red{
	color:#d91917;
	
}



.page6{
	width: 100%;
	background-color: #035989;
}

.title_white{
	text-align: center;
	color: #ffffff;
	font-weight: bold;
	
}

.bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 180px;
    height: 100%;
    background: #b5e61d;
    transform: skew(10deg);
    transform-origin: bottom right;
}

.price{
	width: 800px;
	margin:0 auto;
	border-collapse: collapse;
	border: 1px solid #000;
	background-color: #fff;
	text-align: center;
}

.price th, .price td {
            border: 1px solid #000; 
        }

.price th{
	padding: 10px 0;
	background-color:#ffffff;
	width: 25%;
	font-size: 1rem;
}

.price td{
	font-weight: bold;
	font-size: 1rem;
	padding: 3px 0;
}

 .yureru-j {
    animation: yureru-j 2s infinite;
	 margin-bottom: -10px;	
}
@keyframes yureru-j {
    0% {
        transform: translate(0px, 2px);
    }
    5% {
        transform: translate(0px, -2px);
    }
    10% {
        transform: translate(0px, 2px);
    }
    15% {
        transform: translate(0px, -2px);
    }
    20% {
        transform: translate(0px, 2px);
    }
    25% {
        transform: translate(0px, -2px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}


.title {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}





.footer{
	width: 100%;
}


.footerTop_bg{
	margin: 0 auto;
}

.footerTop{
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px;
}


.f_navi_bg{
	width: 100%;
	background-color: #eee;
	margin: 0 auto;
	text-align: center;
	text-decoration: none;
	padding: 100px 0 ;
}

.f_navi {
	text-decoration: none;
	margin:0 auto;
	padding: 30px ;
	display: inline-block;
	text-align:left;
}

h4{
	font-size: 1.4rem;
}

h5{
	font-size: 1rem;
}

.company{
	color: #666;
	text-decoration: none;
	font-weight: bold;
	font-size: 1rem;
	
}

.footerMain{
	max-width: 800px;
	width: 100%;
	text-align: left;
	color: #333;
	margin: 0 auto;
	padding: 30px 0;
	font-size: 0.8rem;
}

.footerBottom{
	background-color: #d8261c;
	color: #ffffff;
	text-align: center;
	padding: 10px;
	font-size: 0.8rem;
}


.footerLogo {
	width: 80%;
	max-width: 300px;
}

body {
	letter-spacing: 0.05em;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	background-color: #fff;
}

.page1_bg {
	background-image:url("img/pc_bg_01.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.comment{
	width:90%;
	max-width: 1080px;
	margin: 20px auto;
	background-color: #fff;
	padding: 30px 20px;
	box-shadow: 5px 5px #ccc;
}

.comment_img_1 {

  float: left;
  width: 60px;
  height:60px;
  background-size:cover;
  margin-bottom: auto;
}

.comment_name {
  font-weight: bold;
  padding: 20px 0 20px 70px;
  float: none;
  margin-top: auto;
  margin-bottom: auto;
}
.comment_txt {
	line-height: 1.7;
	font-weight: 500;
}
.comment_kome {
  text-align: center;
  padding-bottom: 18px;
  color: #c0c0c0;
}

.yazirusi {
		width: 96%;
	max-width: 1080px;
	margin: -2px  auto 20px;
	text-align: center;
}

.blue_text{
	color: #024C8B;
	font-weight: bold;
}

.text {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.7;
}

.form_img {
	width: 80%;
	max-width: 1080px;
}

#form_2 {
	width: 100%;
max-width: 1080px;
	margin: 0 auto;
	padding: 100px 0;
	height: auto;
	margin-top: -28px;
	background-image:url("img/pc_cta_bg.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
}

.form_annotation {
	font-size: 0.6rem;
	color: #444444;
}

.form_submit {
	background-color: transparent;
	border: 0px;
}

.page {
	margin: 0 auto;
	max-width: 1080px;
	width: 90%;
	padding: 100px 0;
}

.gold_l {
	color: #be9835;
	font-weight: bold;
	font-size: 1.5rem;
}

.gold_text {
	color: #be9835;
	font-weight: bold;
}

.page1_img {
	width: 50%;
	float: none;
}

.page1_title {
	text-align: left;
	width: 100%;
	max-width: 500px;
}


.page1_left {
	width: 50%;
	float: left;
}

.page2_bg {
		background-image:url("img/pc_bg_02.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0 auto;
	text-align: center;
}

.page2_title {
	font-size: 2.5rem;
	color: #fff;
	font-weight:bold;
	text-align: center;
	text-shadow: 0px 0px 10px #000;
}

.page2_m {
	font-size: 2rem;
	color: #fff;
	font-weight:bold;
	text-align: center;
}



.page2_img {
	max-width: 900px;
	width: 100%;
}

.page3_bg {
		background-image:url("img/pc_bg_01.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.page3_left {
		width: 60%;
	float: left;
}

.page3_title {
	max-width: 600px;
	width: 100%;
	left: 0;
}

.page4_bg {
	  background-image: linear-gradient(0deg, transparent calc(100% - 1.5px), #f0f0f0 calc(100% - 1.5px)),
                    linear-gradient(90deg, transparent calc(100% - 1.5px), #f0f0f0 calc(100% - 1.5px));
  background-size: 30px 30px;
  background-repeat: repeat;
  background-position: center center;
	margin: 0 auto;
	text-align: center;
}

#form_3 {
		width: 100%;
max-width: 1080px;
	margin: 0 auto;
	padding: 100px 0;
	height: auto;
	background-image:url("img/pc_cta_bg.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
}

.form_1 {
		width: 100%;
max-width: 1080px;
	margin: -8px auto 0;
	padding: 1px 0 100px;
	height: auto;
	background-image:url("img/pc_fv_bg.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
	text-align: center;
}

.page5_title {
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
}

.page4_title {
	max-width: 800px;
	width: 100%;
}

.comment_imgsize {
	width: 100%;
}

.page6_bg {
	background-image:url("img/pc_bg_05.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.page6_title {
	max-width: 900px;
	width: 100%;
}

.page6_subtitle {
	padding: 0 ;
	margin: 0 auto;
	color: #fff;
	text-align: center;
	font-size: 1.2rem;
	font-weight: bold;
}

.page6_recruit {
	background-color: #29abe2;
	color: #fff;
}

.page6_closed {
	background-color: #d8261c;
	color: #fff;
}

.page6_img {
	max-width: 1080px;
	width: 100%;
	margin: 10px 0;
}



@media (min-width: 1081px) {

.sp{
	display: none !important;
	}
}


@media (max-width: 1080px) {
html{
	overflow-x: hidden;
	font-size: 16px;
	line-height: 1.5;
}
	
.pc{
	display: none !important;
}
	
.fv{
	width: 100%;
	max-width: auto;
height: auto;
object-fit:contain;

	}

.form_box {
	width: 95%;
	border-radius: 10px;
	padding: 20px 0;
	margin: 20px auto 0;
}
	
.line{
	width: 90%;
	max-width: 700px;
}
	
.title {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
}

.mail{
	top: 0px;
	text-align-last: right;
	text-align: right;
}

	
.form_1 {
	width: 100%;
	margin: -8px auto 0;
	height: auto;
	background-image:url("img/sp_fv_bg.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
}
	
.form{
	width: 90%;
	padding: 30px 5%;
	margin-top: -40px;
}

	
.mailform{
	width: 90%;
	height: 50px;
	font-size: 0.8rem;
	text-align: left;
}
	
.page1_left {
	width: 100%;
	float: none;
}

.shiny-btn {
    width: 90%;
	padding: 0;
	max-width: 500px;
}

.frame{
	width: 80%;
	padding: 20px 5% ;
	line-height: 1.5;
}	
	
.checklist{
	width: 90%;
	max-width: 600px;
	font-size: 1rem;
	}	
	
.price{
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	padding: 30px;
	border-collapse: collapse;
}

.price th{
	font-size: 0.7rem;
}

.price td{
	font-size: 0.7rem;
}	

.page7{
	width: 100%;
	background-image: url("img/pc_snapbg.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 8rem 0 0;
	margin: -0px 0;
}

.fixed_size {
width: auto;
}
	
.send-btn {
    width: 80%;
	font-size: 1.5rem;
	padding: 1.5rem 0;
		
}	
	
.company::after{
 content:"\A";
 white-space:pre;
}
	
.footerMain{
	text-align: left;
	color: #333;
	margin: 0 auto;
	font-size: 0.8rem;
	width: 90%;
	padding: 0;
}

	
.mailbtn{
		width: 50px;
	}
	
	
.page {
	padding: 50px 0;
}
	
.page1_img {
	width: 100%;
	float: none;
}
	
.page1_title {
	text-align: center;
	margin: 0 auto;
}
	
.page2_title {
	font-size: 1.6rem;

}
	
.center{
	width: 100%;
	max-width:600px;
}

	
.center img {
    max-width: 100%;
}
	
.page3_left {
		width: 100%;
	float: none;
}
	
.page3_img {
	width: 60%;
	max-width: 500px;
	margin: 0 20%;
}
	
.page6_subtitle {
	font-size: 1rem;
	font-weight: bold;
}
	
.page6_title {
	max-width: 600px;
	width: 100%;
}
	
.form_img {
	width: 80%;
	max-width: 600px;
}
	
.page4_title {
	max-width: 600px;
	width: 100%;
}
	
.f_navi_bg{

	padding: 30px 0 ;
}
	

	
}

