@charset "UTF-8";


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

	TABLE CONTENTS
	---------------------------
		01. Globals
		02. dl
		03. bootstrap 機能拡張
	---------------------------

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

/** 01. Globals
 **************************************************************** **/
.str {
	color: #ff4a72;
	font-size: 120%;
}

h4.topic {
	margin: 5px auto;
	padding: 0;
	border-bottom: 1px solid #00a1e9;
	color: #00a1e9;
}

fieldset.list {
	padding: 0.2em 0.8em 0.8em 0.5em;
	border: 1px #00a1e9 solid;
}

fieldset.list legend {
	color: #00a1e9;
	font-size: 120%;
	font-weight: bold;
	padding-left: 1em;
	padding-right: 1em;
}

.rotate_90 {
	transform: rotate(90deg);    /* 中心を基準点に時計回りに回転する */
}

.rotate_-90 {
	transform: rotate(-90deg);    /* 中心を基準点に時計回りに回転する */
}

@media (max-width: 768px) {
	#example h4 {
		top: -15px;
	}
}

[class*="ind"] a.btn { /* セレクタ名の部分一致 */
	text-indent: 0;
}

.marker.pink a:hover {
 color: #f50e51;
}



/** 02. dl
 **************************************************************** **/
#content dl {
	margin: 1em 0.5em;
}

#content dl dt {
	font-weight: bolder;
	color: #ff4a72; 
	font-size: 120%;
	margin: 2px 0;
}

#content dl dd {
	padding-left: 2em;
	padding-top: 5px;
	margin-bottom: 0.5em;
	line-height: 1.5;
	font-size: 100%;
}

#content dl.photo {
	float: right;
	margin: 0.5em 0 0.5em 1em;
	width: 220px;
}

#content dl.photo dt {
	text-align: center;
	margin-top: 5px;
}

#content dl.photo dd {
	padding-left: 0;
	text-align: left;
	font-size: 90%;
	margin: 0;
}




/** 03. bootstrap 機能拡張
 **************************************************************** **/
.row-center {
	letter-spacing:-0.4em;
}

.row-center > [class*='col-'] {
	display: inline-block;
	letter-spacing: 0;
	vertical-align: top;
	float: none !important;
}

.row-center.va-middle > [class*='col-'] {
	vertical-align: middle;
}

.row-center.va-bottom > [class*='col-'] {
	vertical-align: bottom;
}

.row-center > col-12 {
	display: block;
	letter-spacing: 0;
	vertical-align: top;
	float: none !important;
}




/**  thumbnail関連
 **************************************************************** **/
#pickup .thumbnail {
	background-color: #34AEC1;
}

#content a.thumbnail h4 {
	font-size: 16px;
}

@media (max-width: 768px) {
#content a.thumbnail h4 {
	font-size: 13px;
}
}

.sc .thumbnail {
	background-color: #FFDA4B;
}


.thumbnail {
	display: block;
	padding: 5px 5px;
	margin-bottom: 19px;
	line-height: 1.5;
	background-color: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 6px;
	-webkit-transition: border .2s ease-in-out;
	-o-transition: border .2s ease-in-out;
	transition: border .2s ease-in-out;
}


.thumbnail > img,
.thumbnail a > img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}


.thumbnail a {
	color: #333;
	z-index: 99;
}


.thumbnail .caption {
	padding: 0px;
	text-align: center;
}

	.caption h4 {
		font-size: 16.5px;
	}
	
	#pickup h4 {
		font-size: 16.5px;
	}

@media (max-width: 768px) {
	.caption h4 {
		font-size: 13.5px;
	}
	
	
	#pickup h4 {
		font-size: 13.5px;
	}
}


.thumbnail .caption {
	color: #333;
}


#pickup a.thumbnail {
	color: #fff;
}


a.thumbnail {
	color: #333;
}


#pickup a.thumbnail h4 {
	color: inherit;
}





a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
	border-color: #ff90a1cc;
	background-color: #ffc8d0cc;
}

.sc a.thumbnail:hover,
.sc a.thumbnail:focus,
.sc a.thumbnail.active {
	top: -4px;
	color: #34AEC1;
	text-shadow: 0 0px 0px rgba(0, 0, 0, .4);
	background: #FFEEB1;
	box-shadow: 0.5px 3px 0.5px 0.5px #FFDA4B;
	-webkit-transition: all .3s;
	transition: all .3s;
	border-color: #FFDA4B;
	background-color: #FFEEB1;
}

.thumbnail .icon {
	width: 80px;
	height: 80px;
}

.thumbnail .icon2 {
	width: 160px;
	height: 80px;
}


.btn.shadow_01 {
	-moz-box-shadow:  0px 1px 5px rgba(0,0,0,.3);
	-webkit-box-shadow:  0px 1px 5px rgba(0,0,0,.3);
	box-shadow:  0px 1px 5px rgba(0,0,0,.3);
	-webkit-tap-highlight-color: transparent;
	transition: .3s ease-out;
}


.btn.shadow_01:hover,
.btn.shadow_01:focus,
.btn.focus.shadow_01 {
	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 7.82213px 24.4918px -4.87295px;
	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 7.82213px 24.4918px -4.87295px;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 7.82213px 24.4918px -4.87295px;
}


.icon_tag.module-white {
border-radius: 6px 0px 0px 6px;
margin: 0 4px 0 4px;
position: relative;
}

.icon_tag.module-white::before {
background: #ff5757;
width: 91px;
height: 100%;
left: 0;
position: absolute;
border-radius: 6px 0px 0px 6px;
}

.icon_tag.module-white.bg_blue::before {
background: #38b6ff;
width: 91px;
height: 100%;
left: 0;
position: absolute;
border-radius: 6px 0px 0px 6px;
}

.icon_tag.module-white.bg_yellow::before {
background: #ffde59;
width: 91px;
height: 100%;
left: 0;
position: absolute;
border-radius: 6px 0px 0px 6px;
}

.icon_tag.module-white.bg_pink::before {
background: #ff66c4;
width: 91px;
height: 100%;
left: 0;
position: absolute;
border-radius: 6px 0px 0px 6px;
}

.icon_tag .bg_red {
background: #ff5757;
border-radius: 6px 0px 0px 6px;
}


.icon_tag .bg_blue {
background: #38b6ff;
border-radius: 6px 0px 0px 6px;
}

.icon_tag .bg_yellow {
background: #ffde59;
border-radius: 6px 0px 0px 6px;
}

.icon_tag .bg_pink {
background: #ff66c4;
border-radius: 6px 0px 0px 6px;
}

@media (max-width: 1200px) {
.icon_tag.module-white::before {
width: 76px;
}


.icon_tag.module-white.bg_blue::before {
width: 76px;
}

.icon_tag.module-white.bg_yellow::before {
width: 76px;
}

.icon_tag.module-white.bg_pink::before {
width: 76px;
}
}


@media (max-width: 991px) {
.icon_tag.module-white::before {
width: 56px;
}

.icon_tag.module-white.bg_blue::before {
width: 56px;
}

.icon_tag.module-white.bg_yellow::before {
width: 56px;
}

.icon_tag.module-white.bg_pink::before {
width: 56px;
}
}





@media (max-width: 768px) {
.icon_tag.module-white::before {
content: "";
display: block;
background-color: #ff5757;
width: 41px;
height: 100%;
left: 0;
position: absolute;
border-radius: 6px 0px 0px 6px;
}

.icon_tag.module-white.bg_blue::before {
content: "";
background-color: #38b6ff;
display: block;
width: 41px;
height: 100%;
left: 0;
position: absolute;
border-radius: 6px 0px 0px 6px;
}

.icon_tag.module-white.bg_yellow::before {
content: "";
background-color: #ffde59;
display: block;
width: 41px;
height: 100%;
left: 0;
position: absolute;
border-radius: 6px 0px 0px 6px;
}

.icon_tag.module-white.bg_pink::before {
content: "";
background-color: #ff66c4;
display: block;
width: 41px;
height: 100%;
left: 0;
position: absolute;
border-radius: 6px 0px 0px 6px;
}
}




@media (max-width: 576px) {
.icon_tag.module-white::before {
width: 17%;
margin-right: 10px;
}

.icon_tag.module-white.bg_blue::before {
width: 17%;
}

.icon_tag.module-white.bg_yellow::before {
width:17%;
}

.icon_tag.module-white.bg_pink::before {
width: 17%;
}
}