@charset "UTF-8";
/*  
Theme Name:Original Style - 1column
Version:1.2
*/


.home #contents > .inner {/* トップページ幅 100% */
	width:100%;
	max-width:100%;
}
.topinner {/* コンテンツは1000pxに */
	width:1000px;
	margin:0 auto;
	max-width:96%;
}

/* tinyMCE用に見出しをリセット */
.toppage h3,
.toppage h4,
.toppage h5 {
	background:none;
	border:none;
	color:inherit;
	font-size:inherit;
	line-height:inherit;
	margin:0;
	padding:0;
}
.toppage h3::before,
.toppage h3::after ,
.toppage h4::before,
.toppage h4::after,
.toppage h5::before,
.toppage h5::after {
	display:none;
}


/*==========================
	　mainimage
==========================*/

/*-- スライダーの時 ------------*/

.slider { }
.slick-slide img { margin:0 auto;}

button.slick-arrow {/* 矢印ボタン */
	background:none;
	border:none;
	position:absolute;
	top:50%;
	margin-top:-20px;
	height:40px;
	width:16px;
	text-indent:-9px;
	z-index:1;
}
button.slick-arrow:hover {
 	cursor:pointer;
	opacity:0.7;
}
button.slick-prev {/* 矢印（前へ）ボタン */
	background:url(img/btn_prev.png) no-repeat;
	left:18%;
	margin-left:-16px;
}
button.slick-next {/* 矢印（次へ）ボタン */
	background:url(img/btn_next.png) no-repeat;
	right:18%;
	margin-right:-16px;
}
@media screen and (max-width: 1650px) {
button.slick-prev {	left:13.7%;}
button.slick-next {	right:13.7%;}
}
@media screen and (max-width: 1400px) {
button.slick-prev {	left:8%;}
button.slick-next {	right:8%;}
}
@media screen and (min-width: 1200px) {
.slick-track {}
.mainimage .slick-slide:not(.slick-center) {/* 前と次の画像を半透明に */
	opacity: 0.4;
	-moz-opacity: 0.4;
	filter: alpha(opacity=40);
}
}


/*==========================
	汎用に使えるボタン
==========================*/
.link_btn ,.btn-style { text-align:center; }
.link_btn a,
.btn-style a {
	background:#a28c47;
	width:300px;
	max-width:100%;
	padding:0.8em 1.2em;
	text-align:center;
	color:#fff;
	display:inline-block;
	text-decoration:none;
	line-height:1.2;
	box-sizing:border-box;
	font-size:16px;
	border-radius:5px;
	position:relative;
}
.link_btn a span,
.btn-style a span{
	display:block;
	font-size:12px;
}
.link_btn a::after,
.btn-style a::after {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -7px;
    right: 15px;
    width: 13px;
    height: 13px;
    background: url(img/icon_arrow.png) no-repeat;
    -webkit-transition: .3s;
    transition: .3s;
}
.link_btn a:hover:after,
.btn-style a:hover:after{
	right:13px;
}
.link_btn a:hover,
.btn-style a:hover {
	opacity: 0.7;
	-moz-opacity: 0.7;
	filter: alpha(opacity=70);
 	cursor:pointer;
}
.under .link_btn a,
.under .btn-style a {
	width:auto;
	min-width:280px;
}
/*==========================
	loopSlider　無限ループスライダー
==========================*/
.loopSliderWrap {
    top: 0;
    left: 0;
    height: 250px;
    overflow: hidden;
    position: absolute;
}
 
.loopSlider {
    margin: 0 auto;
    width: 100%;
    height: 250px;
    text-align: left;
    position: relative;
    overflow: hidden;
}
 
.loopSlider ul {
    height: 250px;
    float: left;
    overflow: hidden;
}
 
.loopSlider ul li {
    width: 400px;
    height: 250px;
    float: left;
    display: inline;
    overflow: hidden;
}

/*==========================
	　TOP コンテンツ
==========================*/
.relative{
    position: relative;
}
.top .mainblock a {
	text-decoration:none;
}
.top .mainblock a:hover {
}
/*-- 新着情報 --------------*/
.sec_news {
    padding: 4em 0;
}
.sec_news .news {
    position: relative;
    box-sizing: border-box;
}
.sec_news .news dl{
	line-height:1.3;
}
.sec_news .news dt {
    color: #498bb8;
    padding: 15px 0 0;
}
.sec_news .news dd {
    padding: 10px 0 15px;
    border-bottom: 1px solid #efefef;
}
.news dd a {
    text-decoration: none;
    color: #85969f;
}
.sec_news .news dd a:hover {
    text-decoration: underline;
}
.sec_news .news .btn a:hover {
    opacity: 0.7;
    -moz-opacity: 0.7;
    -webkit-opacity: 0.7;
}
.sec_news .news h3 {
font-size: 27px;
    color: #498bb8;
    line-height: 1.5;
    letter-spacing: 0.1em;
    position: relative;

    padding: 3px 10px 13px 0;
    border-bottom: 1px solid #85969f;
    margin: 0 auto 10px;
    box-sizing: border-box;
    background: none;
    text-align: left;
    border-radius: 0;
}
.sec_news .news h3 .sub{
    font-size:16px;
    color:#a98b42;
    display: inline-block;
    margin-left:1em;
    letter-spacing: 0.05em;
}
.sec_news .news .btn a {
    position: absolute;
    top: 10px;
    right: 0;
    color: #fff;
    font-size: 15px;
    background: #5585b4;
    border-radius: 5px;
    display: table;
    padding: 4px 23px 5px 14px;
    text-decoration: none;
    line-height: 1.3;
}
.sec_news .news .btn a:after {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -5px;
    right: 6px;
    width: 10px;
    height: 11px;
    background: url(img/icon_arrow.png) no-repeat center / 100% auto;
    -webkit-transition: .3s;
    transition: .3s;
    
}


/*見出し*/
.top h2{
font-size: 40px;
    text-align: inherit;
    line-height: 1.4;
    letter-spacing: 0.05em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid;
    display: table;
    padding-bottom: 4px;
}
.top  h2 .sub1{
    display: block;
    font-size:27px;
    color:#85969f;
}
.top  h2 .sub2{
    display: block;
    font-size:16px;
    color:#a98b42;
    margin-top: 14px;
}
.top  .sub-ttl{
    font-size:30px;
    line-height: 1.3;
    margin-bottom:0.8em;
}
.box_link {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.box_link a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
}
.box_link a:after{
    content: "";
    bottom: 10px;
    right: 10px;
    border-top: 12px solid transparent;
    border-right: 12px solid #fff;
    position: absolute;
    z-index: 0;
}

.sec02 .column a:hover,
.sec03 .col a:hover,
.sec05 .column a:hover{
    background-color: #FFF;
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    opacity: 0.3;
}
/*-- ボックスその他 --------------*/
.sec01 {
	padding:4em 0 ;
	background:url(img/sec01_bg.jpg) no-repeat center / cover;
    color:#fff;
}
.sec01 .sub-ttl {
    font-size: 20px;
    line-height: 1.9;
    margin-bottom: 0.8em;
}
.sec02 .column{
    position: relative;
    text-align: center;
    color:#fff;
    padding:4% 15px;
}
.sec02 .column:nth-of-type(1){background: url(img/sec02_bg01.jpg) no-repeat center / cover;}
.sec02 .column:nth-of-type(2){background: url(img/sec02_bg02.jpg) no-repeat center / cover;}
.sec02 .column:nth-of-type(3){background: url(img/sec02_bg03.jpg) no-repeat center / cover;}
.sec02 h2{
    font-size:50px;
    display: block;
    text-align: center;
    max-width: 430px;
    margin: 0 auto 10px;
}
.sec02 .sub-ttl {
    text-align: center;
    font-size: 30px;
    line-height: 1.5;
    margin-bottom: 0;
}
.sec03{
    color:#fff;
}
.sec03 h2 {
    padding-right: 2em;
}
.sec03 .bg01{
    background: url(img/sec03_bg01.jpg) no-repeat center / cover;
    padding: 4% 3.5%;
}
.sec03 .bg02{background: #498bb8;}
.sec03 .bg03{background: #61b0b3;}

.sec03 .con_r {
    width: 440px;
    max-width: 100%;
    margin: 0 auto;
}
.sec03 .column.columns > .col {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    padding:4% 10%;
    box-sizing: border-box;
    -webkit-align-items: center;      /* Safari etc. */
 	-ms-align-items    : center;      /* IE10        */
	align-items        : center;

}
.sec03 .column.columns > .col p{margin-bottom:0;}
.sec03 h3 {
    font-size: 40px;
    width: 30%;
    position: relative;
    line-height: 1.3;
    display: inline-block;
    padding: 0 4% 0 0;
    box-sizing: border-box;
}
.sec03 h3:after {
    content: "";
    display: block;
    width: 1px;
    height: 2em;
    background: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 0;
}
.sec03 .col_right{
    width:60%;
}
.sec03 .bg01 .btn-style a{
    background: none;
    border:1px solid #fff;
    width:170px;
}
.sec03 .bg01 .btn-style a:hover{
    background: rgba(255,255,255,.1);
}
.sec03 .bg01 .btn-style{
    text-align: left;
}

.sec04{
    background: url(img/sec04_bg.png);
    padding: 4em 0;
}
.sec04 .column{
    text-align: center;
}
.sec04 .col_bottom{
    display: inline-block;

}
.sec04 ul {
    margin: 1.5em 0 ;
}
.sec04 ul li{
    font-size:18px;
    background: url(img/chack.png) no-repeat left 30%;
    padding-left:40px;
    line-height: 1.3;
       margin-bottom: 0.9em;
    text-align: left;
    letter-spacing: -0.05em;
}
.sec04 .btn-style{
    text-align: left;
}
.sec04 .btn-style a{
    width:170px;
    background: #5585b4;
}

.sec05{
    background: #dfeff0;
    padding: 4em 0 0;
}
.sec05 h2{
    color:#61b0b3;
    text-align: center;
    border:none;
    margin:0 auto 5%;
}

.sec05 .column{
    position: relative;
    color:#fff;
    background: url(img/sec05_bg01.jpg) no-repeat center / cover;
    padding: 3%  5% 1%;
}
.sec05 .column:nth-of-type(2){background-image: url(img/sec05_bg02.jpg);}
.sec05 .column:nth-of-type(3){background-image: url(img/sec05_bg03.jpg);}
.sec05 h3{
font-size: 40px;
    border-bottom: 1px solid;
    margin-bottom: 0.6em;
    display: table;
    padding-bottom: 14px;
}
.sec05 p.sub-ttl{
    font-size:30px;
    margin-bottom:0.7em;
    line-height: 1.3;
}
.sec06{
    background: #dbe8f1;
    padding: 4em 0 0;
}
.sec06 h2{
    color:#498bb8;
    text-align: center;
    border:none;
    margin:0 auto 5%;
}
.sec06 .bg1 .col_img{
    background: url(img/sec06_bg01.jpg) no-repeat center / cover;
}
.sec06 .bg2 .col_img{
    background: url(img/sec06_bg02.jpg) no-repeat center / cover;
}
.sec06 .bg3 .col_img{
    background: url(img/sec06_bg03.jpg) no-repeat center / cover;
}
.sec06 .con_r,
.sec06 .con_l{
    width: 440px;
    max-width: 100%;
    margin: 0 auto;
}
.sec06 h3{
    font-size: 30px;
    line-height: 1.3;
    color: #498bb8;
    margin-bottom: 4%;
    background: url(img/sec06_num01.png) no-repeat left 30%;
    padding-left: 70px;
}
.sec06 .bg2 h3{
    background-image: url(img/sec06_num02.png) ;
}
.sec06 .bg3 h3{
    background-image: url(img/sec06_num03.png) ;
}
.sec06 h3 .sub{
    display: block;
    font-size:18px;
}
.sec06 .col_txt{
    background:#fff;
    padding: 2.5% 3%;
}

.sec06 .btn a {
    width: 190px;
    max-width: 49%;
    display: inline-block;
}
.sec06 .btn a + a {
    margin-left: 2%;
}

.sec07 .col_img{
    background: url(img/sec07_img.jpg) no-repeat center / cover;
}
.sec07 .col_txt{
    background:#498bb8;
    padding: 4% 5% 3%;
    color:#fff;
}
.sec07 .con_l{
    width: 440px;
    max-width: 100%;
    margin: 0 auto;
}
.sec07 h2:after{
    content: "";
    width: 33px;
    height: 46px;
    background: url(img/sec07_icon.png) no-repeat;
    position: absolute;
    bottom: 0;
    top: 0;
    right: -50px;
    margin: auto 0;
    
}

/********************************
	Responsive
*********************************/

@media screen and (min-width: 768px) {/* タブレットまで */

/*================================
	mainimage　が一枚画像の場合
================================*/
 /*   .mainimage{
        background: url(img/mainimage.jpg) no-repeat center / cover;
        height:500px;
    }
    */

/*==========================
	　TOP コンテンツ
==========================*/
/*-- FLEX設定 --------------*/
.columns {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
}
.col_wrap{ /*改行して組む場合*/
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /*IE10*/
	-webkit-flex-wrap: wrap; /* Safari6.1以降 */
}
.columns.reverse{ /*左右反転*/
-webkit-box-direction:reverse;
    -moz-box-direction:reverse;
    -webkit-box-orient:horizontal;
    -moz-box-orient:horizontal;
    -webkit-flex-direction:row-reverse;
    -moz-flex-direction:row-reverse;
    flex-direction:row-reverse;
}
.columns .column {
    box-sizing: border-box;
    max-width: 48%;
    -webkit-box-flex-basis: 48%;
    -webkit-flex-basis: 48%;
    flex-basis: 48%;
}
.columns.col3{
    -webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}
.columns.col3 .column {
    max-width: 32.2%;
    -webkit-box-flex-basis: 30%;
    -webkit-flex-basis:32.2%;
    flex-basis:32.2%;
    margin-right: 1.7%;
}
.columns.col3 .column:nth-of-type(3n){
        margin-right:0;
}
   .sec01 .columns .column {
    max-width: 40%;
    -webkit-box-flex-basis: 40%;
    -webkit-flex-basis:40%;
    flex-basis:40%;
}
     .sec02 .columns .column,
    .sec05 .columns .column {
    max-width: 33.333%;
    -webkit-box-flex-basis: 33.333%;
    -webkit-flex-basis: 33.333%;
    flex-basis: 33.333%;
}
     .sec03 .columns > .column,
    .sec06 .columns > .column,
    .sec07 .columns > .column{
    max-width: 50%;
    -webkit-box-flex-basis:  50%;
    -webkit-flex-basis: 50%;
    flex-basis: 50%;
}
/*-- ボックスその他 --------------*/
.sec03 .column.columns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around;
}
.sec03 .column.columns > .col {
    flex: 1 0 50%;
}
}

@media screen and (min-width: 768px)  and (max-width: 1560px) {/* 程よいブラウザサイズでメインイメージを縮小 */
    .sec03 h3 {
    font-size: 2.5vw;
    }
}
@media screen and (min-width: 768px)  and (max-width: 820px) {
       .sec03 h3 {
    font-size:28px;
    } 
}
@media screen and (min-width: 768px)  and (max-width: 1041px) {
.sec01 .columns .column {
    max-width: 47%;
    -webkit-box-flex-basis: 47%;
    -webkit-flex-basis:47%;
    flex-basis: 47%;
}
    .sec02 h2 {
    font-size: 4vw;
    }

    .sec05 h3 {
    font-size: 4vw;
}
    .sec05 p.sub-ttl {
    font-size: 3vw;
}
    .sec06 h3 {
    padding-top: 10px;
    font-size: 21px;
    }
    .sec06 h3 .sub {
    font-size: 16px;
}
}

@media screen and (max-width: 1041px) {/*コンテンツが横幅いっぱいになったら*/
.top p.sub-ttl {
    font-size: 22px;
    }
}

@media screen and (max-width: 767px) {/* スマホ */

.topinner {
	width:420px;
	margin:0 auto;
	box-sizing:border-box;
}
.top #contents,
.top #aside{
	margin-bottom:0;
}
/*==========================
	　mainimage
==========================*/
.mainimage, .slider {
    margin-bottom: 0;
}
.mainimage img {
    height: auto;
    max-width: none;
    max-height: none;
    width: 100%;
}
/*==========================
	ボタン
==========================*/


/*==========================
	loop
==========================*/
.loopSlider,.loopSliderWrap {    height: 125px;}
.loopSlider ul {    height: 125px;}
.loopSlider ul li {
    width: 200px;
    height: 125px;
}

/*==========================
	　TOP コンテンツ
==========================*/
.sec_news .news dt {
    width: 100%;
    padding: 10px 0 0;
}
.sec_news .news + .news{
	margin-top:1.5em;
}
.sec_news .news dd {
    padding: 0 0 10px;
}
/*-- 余白・背景 --------------*/
.sec_news {
    padding: 2em 0 1em;
}
    .sec_news .news {
    margin-bottom: 2em;
}
.sec01{
	padding:2em 0 1em;
    background: url(img/bg01.png);
}
    .sec04{
        padding:2em 0;
    }
    .sec05{
        padding:2em 0 0;
    }
    .sec06{
        padding:2em 0 0;
    }
/*-- 見出し --------------*/
.sec_news .news h3 {
    font-size: 24px;
}
    .top h2 {
    font-size: 34px;
    }
    .top h2 .sub1 {
    font-size: 21px;
    }
.top h3 {
    font-size: 30px;
    }
    .sec02 h2 {
    max-width: 250px;
    }
    .sec03 h3{
    font-size: 26px;
    display: table;
    border-bottom: 1px solid;
    padding: 0 2em 5px 0;
    margin-bottom: 0.5em;
    width: auto;
    }
    .sec03 h3:after{
        display: none;
    }
    .top p.sub-ttl {
    font-size: 20px;
}
    .sec06 h3 {
    font-size: 22px;
        background-size: 40px;
        padding-left: 50px;
    }
    .sec06 h3 .sub {
    font-size: 17px;
}
/*-- ボックスその他 --------------*/
    .sec03 .column.columns > .col {
    padding:4% 3.5%;
        display: block;
    }
    .sec03 .col_right{
        width:100%;
    }
    .sec04 .column + .column{
        margin-top:1.5em;
    }
    .sec06 .col_img {
    height: 200px;
    background-position: top!important;
}
    .sec07 .col_img {
    height: 250px;
    background-position: top;
}
}

@media screen and (max-width: 480px) {/* スマホ480px */

}

@media screen and (max-width: 320px) {/* スマホ320px */
}