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

/*初期設定*/
#wrap{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

/*Color*/

.col a{background: #c91d4a;}
.col a:hover{background: #c05c60; color: #fff;}




/*コンテンツ幅01*/
.contents{width:1240px;margin: 0 auto; transition: all .5s; padding: 20px 0;}
@media only screen and (max-width: 1240px){.contents{width:960px;}}
@media only screen and (max-width: 960px){.contents{width:740px;}}
@media only screen and (max-width: 740px){.contents{width:94%;}}


/*コンテンツ幅02*/
.flex{display: flex; justify-content: center; flex-wrap: wrap;}
.flex img{width: 100%; margin: 0 auto;}
.flex_10{width: calc(10% - 20px); padding:0 10px;}
.flex_20{width: calc(20% - 20px); padding:0 10px;}
.flex_30{width: calc(30% - 20px); padding:0 10px;}
.flex_40{width: calc(40% - 30px); padding:0 15px;}
.flex_50{width: calc(50% - 30px); padding:0 15px;}
.flex_60{width: calc(60% - 30px); padding:0 15px;}
.flex_70{width: calc(70% - 40px); padding:0 20px;}
.flex_80{width: calc(80% - 40px); padding:0 20px;}
.flex_90{width: calc(90% - 40px); padding:0 20px;}
.flex_100{width: calc(100% - 40px); padding:0 20px;}

.flex_33{width: calc(33.33% - 80px); padding:0 40px;}
.flex_66{width: calc(66.66% - 20px); padding:0 10px;}

.imgSize33 img{width: calc(33.33% - 20px); padding:15px 10px;}

.flex_50 img{height: 100%;}

@media only screen and (max-width: 600px){
	/*.flex{display: block;}*/
	.flex_10,.flex_20,.flex_30,.flex_40,.flex_50,.flex_60,.flex_70,.flex_80,.flex_90,.flex_100,.flex_33,.flex_66{width: 100%; padding: 0;}
}


/*リンク*/
a {
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	/*border-bottom: dotted 1px rgba(255, 255, 255, 0.5);*/
	text-decoration: none;
	color: inherit;
}

a:hover {border-bottom-color: transparent;}


.btn a{
	display: block;
    position: relative;
    line-height: 30px;
    width: 30%;
    text-align: center;
    color: #fff;
    font-size: 14px;
	font-weight: bold;
    margin: 10px;
    top: 0;
    border-radius: 30px;
    box-shadow: 0px 3px 0px #ccc;
}

.btnceter a{
	display: block;
    position: relative;
    line-height: 40px;
    width: 60%;
    text-align: center;
    color: #fff;
    font-size: 14px;
	font-weight: bold;
    margin: 0 auto;
    top: 0;
    border-radius: 30px;
    box-shadow: 0px 3px 0px #ccc;
}

@media only screen and (max-width: 700px){.btn a,.btnceter a{ width:100%; margin: 0 0 40px 0;}}