@charset "UTF-8";


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

	TABLE CONTENTS
	---------------------------
		01. Globals
		02. Add indent
		03. Characters in the circle
		04. Speech bubble
		05. Note-like background
		06. Bootstrap Function expansion
		07. Dot pattern title in content
	---------------------------

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

/** 01. Globals
**************************************************************** **/
/*===== Box =====*/
#content .box.orange {
	background-color: #F46600;
	color: #FFFFFF;
	border: 0px solid #cccccc;
}


/*===== Box with ribbon =====*/
.ribbon2.box_orange {
	background: #FD861E;
}

.ribbon2.box_orange::before {
	border-right: solid 20px #C86815;
}

@media (max-width: 400px) {
	.ribbon_box h3 {
		font-size: 16px;
	}
}


/*===== dotted line =====*/
.border_bottom_dot.orange {
	border-bottom: 2px dotted #FD861E;
	margin: 0 0 10px 0;
}

.border_bottom_dot.blue {
	border-bottom: 2px dotted #3498db;
	margin: 0 0 10px 0;
}


/*===== Character =====*/
.orange, .orange a {
	color: #FD861E;
}

.vdlv7 {
	font-family: "vdl-v7gothic",sans-serif;
}

#content .bg {
	font-size: 250%;
}

#content .md {
	font-size: 160%;
}

#content .sm {
	font-size: 120%;
}

@media all and (max-width: 515px) {
	#content .bg {
		font-size: 8vw;
	}
	
	#content .md {
		font-size: 5vw;
	}
	
	#content .sm {
		font-size: 4vw;
	}
}

@media all and (max-width: 320px) {
	#content .md {
		font-size: 5vw;
	}
}


/*===== Check background =====*/
#container .fullview2 .fullview-inner2 {
	background-color: #FFFFFF;
	background-image :
	repeating-linear-gradient(to bottom,	/* 横線 */
	transparent 12px,
	rgba(100, 100, 100, 0.20) 13px,  rgba(100, 100, 100, 0.20) 13px,
	transparent 14px,  transparent 25px, 
	rgba(100, 100, 100, 0.20) 26px,  rgba(100, 100, 100, 0.20) 26px,
	transparent 27px,  transparent 38px, 
	rgba(100, 100, 100, 0.20) 39px,  rgba(100, 100, 100, 0.20) 39px,
	transparent 40px,  transparent 51px, 
	rgba(100, 100, 100, 0.20) 52px,  rgba(100, 100, 100, 0.20) 52px,
	transparent 53px,  transparent 64px, 
	rgba(100, 100, 100, 0.20) 65px,  rgba(100, 100, 100, 0.20) 65px),
	
	repeating-linear-gradient(to right,	/* 縦線 */
	transparent 12px,
	rgba(100, 100, 100, 0.20) 13px,  rgba(100, 100, 100, 0.20) 13px,
	transparent 14px,  transparent 25px, 
	rgba(100, 100, 100, 0.20) 26px,  rgba(100, 100, 100, 0.20) 26px,
	transparent 27px,  transparent 38px, 
	rgba(100, 100, 100, 0.20) 39px,  rgba(100, 100, 100, 0.20) 39px,
	transparent 40px,  transparent 51px, 
	rgba(100, 100, 100, 0.20) 52px,  rgba(100, 100, 100, 0.20) 52px,
	transparent 53px,  transparent 64px, 
	rgba(100, 100, 100, 0.20) 65px,  rgba(100, 100, 100, 0.20) 65px);
	padding: 10px 1em;
}


/*===== Image position =====*/
.photo_up {
	position: relative;
	bottom:30px;
	margin-bottom: -30px;
}

@media (max-width: 768px) {
	.photo_up {
		position: relative;
		top: -40px;
		margin: 0 0 -40px;
	}
}


/*===== Paragraph style =====*/
.pad_l25 {
	padding-left: 2.5em;
}


/*===== Round the image =====*/
.comment_phoho {
	border-radius: 50%;
}


/*===== Placement =====*/
.content_inner{
	padding: 15px;
}

@media screen and (max-width: 768px){
	.content_inner {
		padding: 10px;
	}
}

#content .content_inner ul {
	margin: 0;
	padding-left: 1em;
}


/*===== Adjustment =====*/
#content ul {
	margin: 0;
	padding-left: 0em;
}





/** 02. Add indent
 **************************************************************** **/
.ind_005 {
	display: block;
	padding-left: 0.5em;
	text-indent: -0.5em;
}

.ind_01 {
	display: block;
	padding-left: 1em;
	text-indent: -1em;
}

.ind_012 {
	display: block;
	padding-left: 1.2em;
	text-indent: -1.2em;
}

.ind_015 {
	display: block;
	padding-left: 1.5em;
	text-indent: -1.5em;
}

.ind_02 {
	display: block;
	padding-left: 2em;
	text-indent: -2em;
}

.ind_025 {
	display: block;
	padding-left: 2.5em;
	text-indent: -2.5em;
}

.ind_03 {
	display: block;
	padding-left: 3em;
	text-indent: -3em;
}

.ind_04 {
	display: block;
	padding-left: 4em;
	text-indent: -4em;
}

.ind_05 {
	display: block;
	padding-left: 5em;
	text-indent: -5em;
}

.ind_06 {
	display: block;
	padding-left: 6em;
	text-indent: -6em;
}







/** 03. Characters in the circle
 **************************************************************** **/
/* circle */
#content .block_maru {
	margin-bottom: 1rem;
}

#content .maru {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	flex-flow: column;
	vertical-align: top;
}

/* circle size */
#content .size_normal {
	width: 5rem;
	height: 5rem;
}

@media (max-width: 450px) {
	#content .size_normal{
		width: 3.6rem;
		height: 3.6rem;
		margin: 2px 0;
	}
}

/* font size */
#content .letter1 {
	font-size: 2.6rem;
	line-height: 2.6rem;
	color: #FFFFFF;
}

@media (max-width: 450px) {
	#content .letter1 {
		font-size: 2rem;
		line-height: 2rem;
		color: #FFFFFF;
	}
}

/* circle color */
.green1 {
	background-color: #00AC56;
}





/** 04. Speech bubble
 **************************************************************** **/
.fukidashi_none {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	position: relative;
	display: inline-block;
	margin: 0px;
	padding: 15px 10px;
	min-width: 120px;
	max-width: 100%;
	color: #393939;
	font-size: 16px;
	background: #fff;
	border: solid 2px #3498db;
	border-radius: 15px;
}

.fukidashi_none {
	position: relative;
	margin: 0em 0;
	padding: 1.5em 1em;/*文字まわりの余白*/
	border: solid 2px #fc825d;/*線の種類、太さ、色*/
	border-radius: 50px;/*ボックスの角のまるみ*/
}
@media (max-width: 768px) {
.fukidashi_none {
	font-size: 15px;
}
}

.fukidashi_none::before,
.fukidashi_none::after { 
	position: absolute;
	top: 0;
	content:'';
	width: 100%;
	height: 100%;
	border-radius: 50px;/*ボックスの角のまるみ*/
}

.fukidashi_none::before {
	left:0;
	border: solid 2px #fc825d;/*線の種類、太さ、色*/
	transform: rotate(-1.5deg);/*ボックスの角度*/
}

.fukidashi_none::after {
	left:0;
	border: solid 2px #fc825d;/*線の種類、太さ、色*/
	transform: rotate(1.5deg);/*ボックスの角度*/
}

.fukidashi_none p {
	margin: 0; 
	padding: 0;
}

.fukidashi_non2 {
	position: relative;
	display: block;
	margin: 0 0 5px 0;
	padding: 15px 18px;
	min-width: 120px;
	max-width: 100%;
	color: #393939;
	font-size: 14px;
	background: #E0F5AA;
	box-sizing: border-box;
	border-radius: 15px;
}

.fukidashi_non2::before {
	content: "";
	position: absolute;
	top: -30px;
	left: 50%;
}

.voice_fukidashi {
	position: relative;
	display: block;
	margin: 0 0 10px 0;
	padding: 15px 18px;
	min-width: 120px;
	max-width: 100%;
	color: #393939;
	font-size: 14px;
	background: #ffff;
	border-radius: 15px;
}





/** 05. Note-like background
 **************************************************************** **/
.note2 {
	color: #696969;
	font-weight: bold;
	padding: 0.3em 1em 1em 1em;
}

.sen2 {
	background-image: linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 98%, #646464 100%);
	background-size: 100% 2em;
	line-height: 2em;
}





/** 06. Bootstrap Function expansion
 **************************************************************** **/
.row-center {
	letter-spacing: -0.4em;
}

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


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

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



/** 07. Dot pattern title in content
 **************************************************************** **/
.section {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

.section .section-header {
	padding: 15px;
	/*background-color: #ffdbc1;*/
	/*background-image: radial-gradient(#FFF 10%, transparent 20%), radial-gradient(#FFF 10%, transparent 20%);*/
	/*background-size: 20px 20px;*/
	/*background-position: 0 0, 10px 10px;*/
}






/** 00. ドット背景
 **************************************************************** **/
/* ドット斜め */
.bg_dot{
	background-color: #ffdbc1;
	background-image:
		radial-gradient(#fff3eb 20%, transparent 20%),
		radial-gradient(#fff3eb 20%, transparent 20%);
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px;
	border: solid 1px #ffdbc1;
}

/* ドット色違い */
.dot-mix{
	background-image:
		radial-gradient(#fff3eb 20%, transparent 20%),
		radial-gradient(#fff3eb 20%, transparent 20%);
}

/* ドットサイズ違い */
.dot-size{
background-image:
	radial-gradient(#fff3eb 20%, transparent 20%),
	radial-gradient(#fff3eb 35%, transparent 35%);
}


/** 00. マスキングテープ
 **************************************************************** **/

.card2 {
	position: relative;
}
.masking-tape {
	position: absolute;
	top: -1em;
	width: 35%;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	height: 50px;
	background-color: #ffdbc1;
	background-image: radial-gradient(#fff3eb 20%, transparent 20%), radial-gradient(#fff3eb 20%, transparent 20%);
	background-repeat: repeat;
	background-size: 20px 20px;
	border-left: 2px dotted rgba(0, 0, 0, 0.1);
	border-right: 2px dotted rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	padding: 0.25em 2em;
	transform: rotate(-3deg);
	background-position: 0 0, 10px 10px;
	border: solid 1px #ffdbc1;
}
@media (max-width: 768px) {
.masking-tape {
		width: 50%;
	}
}
@media (max-width: 480px) {
.masking-tape {
		width: 70%;
	}
}

.card2 .content_inner {
	padding-top: 3em;
	margin-top: 3em;
}


.ps_-15 {
margin-left: -15%;
}



.card {
	borderradius: 0.3rem;
	}
.content-label_title{
	position: absolute;
	bottom:0px;
	left: 0;
	padding: 5px 10px;
	width: 100%;
	text-transform: uppercase;
	color:#222;
	background: #fff;
	opacity: 0.8;
	border-bottom-left-radius: 0.3rem;
	border-bottom-right-radius: 0.3rem;
}
a.card .content-label_title_text h4{
	font-size: 15.5px;
	font-weight: 800;
	color: #333;
	opacity: 1;
	display: inline-block;
}

.content-wrap{
	margin-bottom: 30px;
	padding: 0px;
	position: relative;
	overflow: hidden;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background: #fff;
}

.content-wrap .content-label_title_text .badge {
	position: relative;
	opacity: 1;
}
	
	@media (max-width: 768px) {
.content-label_title{
	position: absolute;
	bottom:0px;
	left: 0;
	padding: 2px 5px;
	width: 100%;
	text-transform: uppercase;
	color:#222;
	background: #fff;
	opacity: 0.8;
	border-bottom-left-radius: 0.1rem;
	border-bottom-right-radius: 0.1rem;
}
a.card .content-label_title_text h4{
	
	font-size: 0.7rem;
	font-weight: 800;
	color: #333;
	opacity: 1;
}
		.content-wrap .content-label_title_text .badge {
	font-size: 0.6rem;
}
}