@charset "utf-8";
body {
	font: normal 18px/1.7 "arial black","sans-serif","メイリオ";
	text-align: left;
	color:#000;
	text-align: justify;
	overflow-x: hidden;

}

body .sp-item {
    display: none !important; }
  body .pc-item {
    display: block !important; }
	
  @media screen and (max-width: 640px) {
    body {
      min-width: inherit; 
	  height:100%; 
	  }
      body .sp-item {
        display: block !important; }
      body .pc-item {
        display: none !important; } 
	  body .sp-item img {
		width:100%;}
}

@media screen and (max-width: 640px) {
	.sp img{
		max-width:90%;	
}
	.sp02 img{
		max-width:100%;	
}
.sp03 img{
		max-width:70%;	
}
}

.fl_left {
	float: left;
}
.fl_right {
	float: right;
}
.ov_hd {
	overflow: hidden;
}
.bg_none {
	background-image: none!important;
}
a.rollover:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.rollover:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.center {
	text-align: center;
}
.right {
	text-align:right;
}
.line_0 {
	line-height: 0;
}
.zindex {
	z-index: 200;
}

input[type=radio] {
	width: 15px;
	height: 15px;
	vertical-align: middle;
}

input[type=image]:hover{
		opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	}


/* ----------------------------------------------------
 
    text
 
---------------------------------------------------- */

h2{
	padding-bottom: 3px;
	font-size:22px;
}

em {
	text-decoration: underline;
  font-style: normal;
}

.bd_red {
	border-bottom: 1px solid #FF0004;
	padding-bottom: 2px;
}

.bd_red02 {
	border-bottom: 3px solid #FF0004;
	padding-bottom: 0px;
}

.red {
	color: #ff0000;
}
.yellow {
	background-color: #ffff00;
}
.gray {
	color:#666666;
}
.bold {
	font-weight: bold;
}
strong {
	font-weight: bold;
}
.strike {
	text-decoration: line-through;
}
.ac {
	text-align: center !important;
}
.ar {
	text-align: right !important;
}
.al {
	text-align: left !important;
}
.bold {
	font-weight: bold !important;
}
.font10 {
	font-size: 10px !important;
}
.font11 {
	font-size: 11px !important;
}
.font12 {
	font-size: 12px !important;
}
.font13 {
	font-size: 13px !important;
}
.font14 {
	font-size: 14px !important;
}
.font15 {
	font-size: 15px !important;
}
.font16 {
	font-size: 16px !important;
}
.font17 {
	font-size: 17px !important;
	line-height:150%;
}
.font18 {
	font-size: 18px !important;
}
.font19 {
	font-size: 19px !important;
}
.font20 {
	font-size: 20px !important;
}
.font21 {
	font-size: 21px !important;
}
.font22 {
	font-size: 22px !important;
}
.font23 {
	font-size: 23px !important;
}
.font24 {
	font-size: 24px !important;
}
.font25 {
	font-size: 25px !important;
}
.font26 {
	font-size: 26px !important;
}
.font27 {
	font-size: 27px !important;
}
.font28 {
	font-size: 28px !important;
}
.font29 {
	font-size: 29px !important;
}
.font30 {
	font-size: 30px !important;
}
.font32 {
	font-size: 32px !important;
}
/* ----------------------------------------------------
 
    float
 
---------------------------------------------------- */
.fr {
	float: right !important;
}
.fl {
	float: left !important;
}
.clear {
	clear: both;
}
img {
	line-height: 0;
	padding: 0;
	margin: 0;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;/*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
/* ----------------------------------------------------
    clearfix の代用
    <div class="hr"><hr /></div>
---------------------------------------------------- */

/* ----------------------------------------------------
header
---------------------------------------------------- */
.logo {
    text-align: left;
    padding: 20px ;
}

.main {
    text-align: center;
}

.w100 img {
    width: 100%;
}

@media screen and (max-width: 640px) {
    .logo {
        padding: 8px;
    }
}

/* ----------------------------------------------------
btn
---------------------------------------------------- */
.area_btn01 {

    background-color: #FFF;
}

.area_btn {
    width: 500px;
    position: relative;
    margin: 0 auto;
}
.btn {
    position: absolute;
    bottom: 35px;
    left: 120px;
}

.area_btn02 {
    background-color: #fff;
}


.area_btn02_inner {
    text-align: center;
    font-weight: bold;



}

.area_btn02 h2 {
    margin: 10px 0;
}

.btn02 {
    margin: 0 auto;
}

@media screen and (max-width: 640px) {
    .area_btn01 {
        padding: 1px 0 3px;
    }
    
    .area_btn {
        background-color: #FFF;
        width: 100%;
        height: auto;
        position: relative;
        padding: 20px 0 10px;
        margin:0 auto;
}

    .btn {
        width: 87%;
        position: absolute;
        bottom: 0px;
        left: 0px;
        transform: translate(8%,-23%);
}
    .area_btn02 {
        padding-bottom: 30px;
    }
    
    .area_btn02_inner {
        text-align: left;
        padding: 0 auto;
    }
}

/* ----------------------------------------------------
area03
---------------------------------------------------- */
.area03 {
    background: url("../images/area03_bg.jpg") ;
    background-position: center top;
    background-size: cover;
    text-align: center;
    padding: 100px;
    margin: 0 auto;
}

@media screen and (max-width: 640px) {
    .area03 {
        padding: 20px 10px 0;
    }
}

.area03_img {
    padding-top: -10px;
}


/* ----------------------------------------------------
area04
---------------------------------------------------- */
.area04 {
    text-align: center;
}

/* ----------------------------------------------------
area05
---------------------------------------------------- */
.area05 {
    background-color: #E2ECFF;
    padding-bottom: 50px;
}
.area05 h2{
    background-color: #0066FF;
}

.area05 h3 {
    margin-top: 30px;
}
.area05_box {
    background-color: #fff;
    width: 680px;
    margin: 0 auto;
    padding: 20px 52px 40px;
    margin-bottom: 20px;
    box-shadow: 0px 4px 15px -7px #777777;
    border-radius: 0px;
}

.area05_inner {
    text-align: left;
    margin: 10px auto;
}

@media screen and (max-width: 640px) {
    .area05 {
        padding-bottom: 20px;
    }
    .area05 h2 {
        background-color: #E2ECFF;
    }
    
    .area05_box {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        padding: 15px;
        
    }
    
    .area05_inner {
        text-align: left;
        margin: 10px auto;
    }
}

/* ----------------------------------------------------
area06
---------------------------------------------------- */
.area06 {
    background: url("../images/bg_06.png") repeat;
    padding-bottom: 50px;
}

.area06 h2 {
    padding: 15px 0 0;
    margin-bottom: -30px;
}

.area06_box01 {
    background-color: #fff;
    width: 780px;
    border: 10px solid #E2ECFF;
    box-sizing: border-box;
    padding: 20px 45px;
    margin: 0 auto;
}

.area06_box02 {
    width: 680px;
    display: flex;
    padding: 10px;
    margin: 0 auto;
}

.style01_l {
    float: left;
    width: 460px;
}

.style01_r {
    float: right;
    width: 210px;
}

.style02_l {
    float: left;
    width: 210px;
}

.style02_r {
    float: right;
    width: 460px;
}

.style_inner {
    margin-top: 10px;
}


@media screen and (max-width: 640px) {
    .area06 {
        padding-bottom: 30px;
    }
    .area h2 {
        padding-top: 10px;
    }
    
    .area06_box01 {
        width: 95%;
        border: 5px solid #E2ECFF;
        padding: 6px;
    }
    
    .area06_box02 {
        width: 100%;
        box-sizing: border-box;
        flex-direction: column;
        padding: 10px 0;
    }
    
    .area12_box:nth-last-of-type(odd) {
        background: #fff;
    }
        
    
    .style01_l,.style01_r,.style02_l,.style02_r {
        float: none;
        width: 100%;
        text-align: center;
        margin: 5px auto;
    }
    
    .style_inner {
        float: none;
        width: 100%;
        text-align: left;
    }
    
    .order1 {
        order: 1;
    }
    .order2 {
        order: 2;
    }
    .order3 {
        order: 3;
    }
    .order4 {
        order: 4;
    }
    .order5 {
        order: 5;
    }
    .order6 {
        order: 6;
    }
    .order7 {
        order: 7;
    }
    .order8 {
        order: 8;
    }
    .order9 {
        order: 9;
    }
    .order10 {
        order: 10;
    }
}

/* ----------------------------------------------------
area07
---------------------------------------------------- */
.area07 {
    text-align: center;
    margin: 0 auto;
}

@media screen and (max-width: 640px) {
    .area07 {
        margin: 0 auto;
    }
}

/* ----------------------------------------------------
footer
---------------------------------------------------- */
.footer {
    background-color: #E2ECFF;
    padding: 40px 50px; 
}

.footer_box {
    width: 1100px;
}

.sns_l {
    float: left;
    text-align: right;
    width: 250px;

    padding-right: 20px;

}

.logo_r {
    float: right;
    width: 800px;
    padding: 80px 0;
}


/* ボタン全体 */
.flowbtn17{
    border-radius:50%;
    position:relative;
    display:inline-block;
    width:40px;
    height:40px;
    font-size:20px;
    text-decoration:none;
    transition:.5s;
    background-color:#444;
    color:#fff;
}
/* ボタンマウスホバー時のテキスト指定 */
.flowbtn17:hover{
    text-decoration:none;
}
/* アイコンをど真ん中に */
.flowbtn17 i{
    position:absolute;
    top:50%;
    left:50%;
    -ms-transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}
/* Instagramマウスホバー時 */
.flowbtn17.insta_btn2:hover{
    background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
    background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;		
}
/* Facebookマウスホバー時 */
.flowbtn17.fl_fb2:hover{
    background:-webkit-linear-gradient(top, #5c80c6 0%, #34528c 74%);	
    background:linear-gradient(to bottom, #5c80c6 0%, #34528c 74%);
}
/* YouTubeマウスホバー時 */
.flowbtn17.fl_yu2:hover{
    background:linear-gradient(135deg, #f5515f 0%,#c9293c 100%);
}
/* LINEマウスホバー時 */
.flowbtn17.fl_li2:hover{
    background: linear-gradient(135deg, #3a9278 0%,#00c300 100%);
}
/* ulタグの内側余白を０にする */
ul.snsbtniti2{
    padding:0!important;
}
/* ボタン全体の位置 */
.snsbtniti2{
    display:flex;
    flex-flow:row wrap;
}
/* ボタン同士の余白 */
.snsbtniti2 li{
    flex:0 0 48%;
    text-align:center !important;
}

@media screen and (max-width: 640px) {
    .footer {
        padding: 30px;
    }
    
    .footer_box {
        width: 100%;
        text-align: center;
        margin: 20px auto;
    }
    
    .sns_l {
        float: none;
        text-align: center;
        width: 100%;
        margin: 10px 0;
        border-right:none;
    }
    
    .logo_r {
        float: none;
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }

    .snsbtniti li {
        display: inline-block;
    }
    
    .flowbtn17 {
        width: 50px;
        height: 50px;
        font-size:30px;
    }
}


.box1{
        color:#2f4f4f;
     	text-align: center;
	letter-spacing:1em;
	line-height:3em;
        }



.area03{
	padding-top: 50px;
	
}

.area_btn02 {

	background-color: #fff;
  	background-position: center top;
	margin: 0 auto;
	padding: 0;
}



/* 資料請求・問い合わせマウスホバー時凹む */


.hover3 {
	color: #fff;
	display: inline-block;
	padding: 0.6em 2em;
	margin: 0 0 1em;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}
.hover3:hover {
	border-bottom-color: transparent;
	transform: translateY(0.1875em);
}



/* CSS文字マーカー */

.marquee {
background-color: #fff; /* 背景色 */
font-size:20px;
color: #021d59; 
width: 2000px; /* 横幅 */
overflow: hidden;
}

.marquee > span {
display: inline-block;
white-space: nowrap;
padding-left: 100%;
animation-name: MarqueeScroll;
animation-timing-function: linear;
animation-duration: 11s; /* 1周するのにかかる時間 */
animation-iteration-count: infinite; /* 繰り返す回数 */
}

@keyframes MarqueeScroll {
from { transform: translateX(0);}
to { transform: translateX(-100%);}
}