/***********************************

index2.css 

***********************************/
@charset "UTF-8";

/* font */
@font-face {
    font-family: 'GENJ';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/GenJyuuGothic-Medium.eot');
    src: url('../fonts/GenJyuuGothic-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/GenJyuuGothic-Medium.ttf') format('truetype'),
    url('../fonts/GenJyuuGothic-Medium.woff') format('woff');
}
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/NotoSansCJKjp-Regular.eot');
    src: url('../fonts/NotoSansCJKjp-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NotoSansCJKjp-Regular.woff') format('woff'),
    url('../fonts/NotoSansCJKjp-Regular.ttf')  format('truetype');
}

/* main */
.main{
	max-width: 960px;
}
.main .inner {
	margin-top: 0.8em;
	padding-bottom: 0;
	padding-right: 0.2em;
  padding-left: 0.4em;

}

/* visual */
.visual {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	padding: 30px;
	
}

.visual_subtit {
	position: relative;
	text-align: center;
	text-align: left;
	padding: 0 0 0 6px;
	color: #000;
	font-family: "Avenir Next", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif;
	font-weight: bold;
	letter-spacing: 0.1em;
	z-index: 10;

}

h1 {
	position: relative;
	margin: 17px 0 0 -8px;
	text-align: left;
	color: #000;
    font-family: 'GENJ';
    font-size: 170%;
    font-weight: 500;
    letter-spacing: 0.01em;
	z-index: 10;
}

h1 span {
	display: inline-block;
	font-size: 150%;
	line-height: 0.9em;
}

.visual_txt {
	position: relative;
	margin: 15px 0 0 5px;
	color: #fff;
	font-family: 'Noto Sans Japanese';
	font-size: 123%;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	z-index: 10;
	text-shadow: 1px 1px 2px #555, -1px -1px 2px #555;;
}

.visual_img {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	z-index: 1;
}
.left .visual_img {
	right: auto;
	left: 0;
}

.visual_img img {
	width: auto;
	height: 100%;
}


/* h2 */
.h2_outer {
	position: relative;
}
.h2_outer:before {
	position: absolute;
    top: 6px;
    left: 7px;
	width: 45px;
	height: 45px;
	background: url(../images/index2/h2_bg01.png) no-repeat top left;
	-webkit-background-size: 41px auto;
	background-size: 41px auto;
	z-index: 5;
	content: "";
}
.h2_outer:after {
	position: absolute;
	top: 6px;
	right: 7px;
	width: 45px;
	height: 45px;
	background: url(../images/index2/h2_bg02.png) no-repeat top right;
	-webkit-background-size: 41px auto;
	background-size: 41px auto;
	content: "";
}

.h2_inner {
    position: relative;
    margin: 0;
    height: 145px;
    border-radius: 8px;
    background: #f06e80;
}
.h2_inner:before {
	position: absolute;
    bottom: 6px;
    left: 7px;
	width: 45px;
	height: 45px;
	background: url(../images/index2/h2_bg03.png) no-repeat bottom left;
	-webkit-background-size: 41px auto;
	background-size: 41px auto;
	content: "";
}
.h2_inner:after {
	position: absolute;
	bottom: 6px;
	right: 7px;
	width: 45px;
	height: 45px;
	background: url(../images/index2/h2_bg04.png) no-repeat bottom right;
	-webkit-background-size: 41px auto;
	background-size: 41px auto;
	content: "";
}

.h2_box {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	margin: auto;
	color: #fff;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	     -o-transform: translateY(-50%);
	        transform: translateY(-50%);
}

h2 {
    margin: 0;
    font-family: 'Noto Sans Japanese';
    font-size: 135%;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.1em;
}

.h2_subtit {
	margin: 3px 0 0;
	text-align: center;
    font-family: 'GENJ';
    font-size: 100%;
    font-style: normal;
    font-weight: 500;
}

.h2_icon {
	position: absolute;
	bottom: -30px;
	right: 0;
	left: 0;
	margin: auto;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-top: 15px solid #f06e80;
    z-index: 20;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

/* link */
.link {
	margin: 0;
}

.link li {
	float: left;
	position: relative;
/*	margin: 0;*/
	margin: 1px 0;
/*	width: 50%;*/
	width: 100%;
/*	height: 225px;*/
/*	background: #ffefe8;*/
}

[class$="_index"] .link_txt{
	display: none;
}
.link li:nth-child(1) {
	margin-top: 2px;
}
.link li:nth-child(3n+2) {
/*	background: #f2f2f2;*/
}
.link li:nth-child(3n+3) {
/*	background: #e4d5c9;*/
}
.link li:before {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	border-bottom: 2px dotted #fff;
	content: "";
}
.link li:after {
	position: absolute;
	top: 0;
	bottom: 0;
	right: -2px;
	margin: auto;
	border-left: 2px dotted #fff;
	content: "";
	z-index: 10;
}
.link li:nth-last-child(2):before,
.link li:last-child:before {
	display: none;
}

.link li.w100p { width: 100%; }
.link li.bdrB:before { display: block; }


.link_txt {
	position: relative;
	margin: 0;
	height: 155px;
	text-align: center;
	color: #f06e80;
    font-family: 'Noto Sans Japanese';
    font-size: 90%;
    font-style: normal;
    font-weight: 400;
    line-height: 1.8;
}



.link_txt span {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	     -o-transform: translateY(-50%);
	        transform: translateY(-50%);
}

.link_btn {
	margin: 0 12px;
    font-family: 'Noto Sans Japanese';
    font-size: 74%;
    font-style: normal;
    font-weight: 400;
}

.link_btn a {
	display: block;
	position: relative;
	padding: 11px 30px 12px 15px;
	color: #fff;
	border-radius: 25px;
	background: #000;
}
.link_btn a:after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 14px;
    margin: auto;
    width: 10px;
    height: 10px;
    border-top: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    content: "";
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}



/* clearfix */
.clearfix {
zoom: 1;
}

.clearfix:after {
content: "";
display: block;
clear: both;
}


/* 幅変更用 */
@media screen and (min-width:481px) {
	.main{
/*		margin-top:0;*/
		max-width: 640px;
		margin: 0 auto;
	}
	h1 {
		font-size: 205%;
	}
	h1 span {
		font-size: 184%;
	}
	h2 {
	    font-size: 180%;
	}
	.h2_subtit {
	    font-size: 118%;
	}
/*
	.link li {
		height: 255px;
	}
*/
	.link_txt {
	    font-size: 120%;
		height: 175px;
	}
	.link_btn {
	    font-size: 106%;
	}
}