@charset "utf-8";
/* CSS Document */

/* reset
---------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, img, dl, dt, dd, ol, ul, li, form, label, legend, table, tbody, tr, th, td, article, embed, footer, header, hgroup, nav, section, time{margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;font-weight:normal;}

/* HTML5 display-role reset for older browsers */
article, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}
table {border-collapse: collapse;border-spacing: 0;}


*{box-sizing: border-box;}

/* font
---------------------------------------------------------- */
body{font-size:14px; color:#333; line-height:1.3; background:#fff;font-family: "Sawarabi Mincho"; }

.cl{clear: both;}
.fL{ float: left;}
.fR{float: right;}
.mb{margin-bottom: 10px;}
.mR{margin-right: 9px;}
.mL{margin-left: 0px;}
/* common.js
---------------------------------------------------------- */
.imgover{}
.over{}
.anchor{}






/* add .css common
---------------------------------------------------------- */

/* ◆ wrap ◆ */
.contents{padding:0;}
.contents section{font-family: /* お好み設定※全体適応箇所 */;}
.contents .btn:hover{opacity:0.8;filter: alpha(opacity=80);-ms-filter: "alpha(opacity=80)";-khtml-opacity: .80;-moz-opacity: .80;-moz-transition: opacity 0.2s ease;-webkit-transition: opacity 0.2s ease;-o-transition: all 0.2s ease; ease,opacity 0.2s ease;}


/* ◆ img ◆ */
.contents img{width:100%;vertical-align:bottom}


/* ◆ float inline ◆ */
.contents,
.contents section ul,
.contents section p{letter-spacing:-.4em;}
.contents section,
.contents section ul li,
.contents section ul li span,
.contents section p span{display:inline-block;*display:inline;*zoom:1;letter-spacing:normal;vertical-align:top;font-size: 1.0rem;}


/* ◆ line ◆ */
hr[class^="line"]{margin:28px 0 0 0;}
.line3{width:980px;}
.line2{width:650px;}
.line1{width:330px;}


/* ◆ btn ◆ */
.btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;-o-text-overflow:ellipsis;}
.btn span:nth-of-type(1){width:90%;line-height:42px;}
.btn span:nth-of-type(2){width:10%;font-size:0.5em;line-height:42px;}


/* ◆ btn ◆ */
.btn{
/* frame */ height:42px; margin:10px auto 0;padding:0 2%;
background: #fcda95; /* Old browsers */
/* font  */ text-align:center;
	color: #535353;
    outline: 2px solid #fff; /* 線幅、線のスタイル、カラー */
        outline-offset: -6px; /* 対象の要素からの距離、マイナス(内側)にも対応 */
        padding:2px;position: relative;}

.btn1{width:52%;}
.long{width:80%;position: relative;}
.btn3{width:32%;margin-left:1%;}
.btn4{width:23.8%;margin-left:1%;}


@media screen and (min-width: 640px) {

/* layout PC first
---------------------------------------------------------- */

/* ◆ link ◆ */
.contents a:link,.contents a:visited,.contents a:hover,.contents a:active{color:#FFF!important;text-decoration:none!important;}


/* ◆ h ◆ */
.contents h2{width:100%; border-bottom:#777 double 3px;margin:0 auto;padding:0 0 0 1%;letter-spacing:1px;line-height:2.5;}


/* ◆ wrap ◆ */
.contents{width:980px;margin:0 auto;}
.contents section{margin:4% 0 0 0;font-size:1.3em;}
.contents section ul li{vertical-align:bottom;}

.mainArea ul li{ width: 50%;display:inline-block;vertical-align: top;}
.mainArea ul li:nth-last-of-type(2n){ padding-right:5px;}
.mainArea ul li:nth-last-of-type(1n){ padding-left:5px;}
.wrap_Ver3{width:980px;}
.wrap_Ver2{width:650px;}
.wrap_Ver1{width:320px;}

section[class^="wrap_Ver"] > ul > li{width:320px;margin-top:20px;}
.wrap_Ver3 > ul > li:nth-of-type(3n+2){margin:0 10px;}
.wrap_Ver2 > ul > li:nth-of-type(2){margin:0 0 0 10px;}

.bnrArea li{margin-top:10px;}
    
/* ◆ wrap ※ivent-margin ◆ */
.wrap_Ver1.mL{margin-left:10px;}
.wrap_Ver1.mR{margin-right:10px;}

}



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

/* layout SP
---------------------------------------------------------- */

/* ◆ link ◆ */
.contents a:link,.contents a:visited,.contents a:hover,.contents a:active{color:#fff!important;text-decoration:none!important;}
    .sp{}

/* ◆ h ◆ */
.contents h2{width:100%; border-bottom:#777 double 3px;margin:0 auto;padding:0 0 0 1%;letter-spacing:1px;line-height:2.5;}


/* ◆ wrap ◆ */
.contents{width:96%;margin:0 auto;}
.contents section{font-size:0.9em;}
hr{display:none;}

section[class^="wrap_Ver"] > ul > li{width:49%;margin-top:5%;}
section[class^="wrap_Ver"] > ul > li:nth-of-type(even){margin-left:2%;}
section[class^="wrap_Ver"] > ul > li > a,
section[class^="wrap_Ver"] > ul > li > ul{
  display: block;
  margin-top: 10px;
}
section[class^="wrap_Ver"] > ul > li > ul li:not(:nth-of-type(1)){
    margin-top:10px;
}
/* ◆ btn ◆ */
.btn{
/* frame */ width:100%; height:42px; margin:0;padding:0 8%;
/*
            background:#FFF;
			border-bottom:#aaa solid 1px;
*/
/* font  */ text-align:left;}
.btn3{padding:0;}
.btn3 a{padding:0 3%;display: block;}
.mainArea li{display: inline-block !important; width:49%;padding:1.4%;}   
.mR{margin: 0;}
.mL{margin-left: 9px;}
}