@charset "UTF-8";


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

	TABLE CONTENTS
	---------------------------
		01. Globals
		02. SNS ICONs
		03. Buttons
		04. bootstrap panel 調整
		05. label 調整
		06. 蛍光マーカー風 追加
		07. 矢印
		08. 背景 追加
		09. 角数字カウンターリスト
		10. thumbnail関連
		11. 画像の上に文字
		12. Bootstrap 機能拡張
		13. インデント追加
		14. Box
		15. ドロワーメニュー
		16. 順番に現れる
		11. スクロールダウンボタン
		12. order_btn
		13. 追従ボタン
		14. 吹き出し
	---------------------------

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

/** 01. Globals
 **************************************************************** **/
body {
	background-color: #fff;
}

#content{
font-family: "Meiryo UI","ＭＳ Ｐゴシック","Open Sans", "Lucida Grande", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Verdana, sans-serif;
}

article {
	overflow-x: hidden;
}

/*
#wrapper {
	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);
}
*/

#pagebody {
	background-color: transparent;
}

#content .nav {
	margin: 0;
	padding-left: 0;
}

#bootstrap_loading {
	display: none;
}

@media (min-width: 576px) {
	.container {
		width: auto;
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.container {
		width: auto;
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	.container {
		width: auto;
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	.container {
		width: auto;
		max-width: 1140px;
	}
}

@media (max-width: 515px){
	.content_full {
		margin: 0 -10px;
	}
}

.radius10 {
	border-radius: 10px; /* ちょっとだけ角丸 */
}

@media (max-width: 768px) {
	h3, .h3 {
		font-size: 18px;
	}
}

.fukidashi_non {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 12px 12px;
	min-width: 120px;
	max-width: 100%;
	color: #333333;
	font-size: 16px;
	background: #fff;
	box-sizing: border-box;
	border-radius: 15px;
}

#content a {
	text-decoration: none;
}


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

#container .fullview {
	width: 100vw;
	height: 70vh;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

#container .fullview.top {
	margin-top: -3em;
}

#container .fullview .fullview-inner {
	width: 100vw;
	height: 70vh;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
	display: table;
	position: relative;
	z-index: 0;
}

@media screen and (max-width: 768px){
#container .fullview .fullview-inner {
	height: 60vh;
}
}

#container .fullview2 {
	width: 101vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

#container .fullview2 .row {
	margin-left: 0;
	margin-right: 0;
}


#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 0;
}

#container .fullview3 {
	width: 100vw;
	height: 60vh;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

#container .fullview3 .fullview-inner3 {
	width: 100vw;
	height: 100%;
	background-size: auto 100%;
	background: center;
	background-repeat: no-repeat;
	text-align: center;
	display: table;
	position: relative;
	z-index: 0;
}
#container .fullview3 .fullview-inner4 {
	width: 100vw;
	height: 90vh;
	background-size:  auto 100%;
	background-repeat: no-repeat;
	text-align: center;
	position: absolute;
	z-index: 2;
	right: 0;
	top: 0;
}


#container .fullview5 {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background-image: url(../images/fullview06.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

#container .fullview5 .fullview-inner5 {
	padding: 15px;
}

#container .fullview5 .fullview-inner5 .container {
	margin-bottom: 0rem;
}



@media all and (max-width: 768px) {
	#container .fullview3 {
		height: 70vh;
	}
	#container .fullview3 .fullview-inner3 {
		width: 100vw;
		height: 70vh;
		background-size: auto 100%;
		background-repeat: no-repeat;
		text-align: center;
		display: table;
		position: relative;
		z-index: 0;
	}
	#container .fullview3 .fullview-inner4 {
	width: 100vw;
	height: 70vh;
	background-size: auto 100%;
	background-repeat: no-repeat;
	text-align: center;
	position: absolute;
	z-index: 2;
	right: 0;
	top: 0;
}

}




#container .fullview .fullview-inner.shade::before,
#container .fullview3 .fullview-inner3.shade::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
/*	background-color: rgba(0,0,0,0.1);*/
	content: ' ';
	z-index: 0;
}

#container .fullview .vmid,
#container .fullview3 .vmid {
	display: table-cell;
	vertical-align: middle;
	position: relative;
	z-index: 1;
}

#container .fullview .vmid2,
#container .fullview3 .vmid2 {
	display: table-cell;
	vertical-align: top;
	text-align: center;
	position: relative;
	z-index: 1;
}

#container .fullview .vmid .logo,
#container .fullview3 .vmid .logo {
	margin: 0 auto;
	max-width: 600px;
}

#container .fullview .vmid .logo p {
	font-size: 1.6em;
	text-shadow: 0px 0px 5px #808080;
}

#container .fullview3 .vmid2 .logo {
	margin: 0 auto;
	max-width: 300px;
	top: 0%;
  position: relative;
}



#container .fullview .vmid .logo.bk_w {
	background: rgba(255, 255, 255, .40);
}

#container .flexbox {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

#container .flexbox.reverse {
	flex-direction: row-reverse;
}

#container .flexbox .flexitem.width30 {
	width: 30%;
}

#container .flexbox .flexitem {
	padding: 2rem;
	max-width: 50%;
}

@media all and (max-width: 768px) {
	#container .fullview3 .vmid2 .logo {
	margin: 0 auto;
	max-width: 250px;
	top: 0%;
  position: relative;
}
}

@media all and (max-width: 500px) {
	#content .flexbox .flexitem {
		padding: 0.5rem;
		width: auto;
	}
	
	#container .fullview .vmid .logo,
#container .fullview3 .vmid .logo {
	margin: 0 auto;
	max-width: 300px;
}
#container .fullview .vmid .logo p {
	font-size: 1.1em;
}
	#container .fullview3 .vmid2 .logo {
	margin: 0 auto;
	width: 200px;
	top: 5%;
	right: 10%;
  position: absolute;
}
}





/*===== スペース追加 =====*/
#container .mbtm1rem {
	margin-bottom: 1rem;
}

#container .mbtm3rem {
	margin-bottom: 3rem;
}

#container .mtop3rem {
	margin-top: 3rem;
}

#container .mtop2rem {
	margin-top: 2rem;
}

#container .mtop1rem {
	margin-top: 1rem;
}

#container .section {
	margin-right: -10px;
	margin-left: -10px;
	padding: 10px;

}



#container .bg {
	font-size: 250%;
	line-height: 1.3;
}

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

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

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

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

/*===== 丸の中の文字 =====*/
#content .maru {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	flex-flow: column;
	vertical-align: top;
}

#content .maru2 {
	display: inline-table;
	text-align: center;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 5px;
	margin-left: -26px;
}

/* 円の大きさ */
#content .size_bg {
	width: 20rem;
	height: 20rem;
}

#content .size_normal {
	width: 2rem;
	height: 2rem;
}

#content .size_md {
	width: 3rem;
	height: 3rem;
}

/* 画像の大きさ */
img.w50 {
	width: 50px;
	}
	img.w100 {
	width: 100px;
	}

/* 文字の大きさ */
#content .letter {
	font-size: 1.5rem;
	line-height: 1.5rem;
	color: #FFFFFF;
}

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

#content .letter3 {
	font-size: 1.5rem;
	font-weight: 800;
	margin: 0 10px 0 0;
}

/* 円の装飾 */
.pink1 {
	background-color: #F56883;
}
.gray1 {
	background-color: #4F4E4E;
}

.green1 {
	background-color: #90b37a;
}

.green2 {
	background-color: #fff;
	color: #8FDDA7;
	border: solid 2px #8FDDA7;
}

.blue2 {
	background-color: #fff;
	color: #BFC5F4;
	border: solid 2px #BFC5F4;
}

.orange2 {
	background-color: #fff;
	color: #EF8080;
	border: solid 2px #EF8080;
}

@media (max-width: 515px) {
	#content .size_bg {
		width: 13rem;
		height: 13rem;
	}
	
	#content .size_normal { 
		width: 2.8rem;
		height: 2.8rem;
	}
	
	/* 文字の大きさ */
	#content .letter {
		font-size: 1.8rem;
		line-height: 1.8rem;
	}
	
	#content .letter1 {
		font-size: 2rem;
		line-height: 2.2rem;
		color: #FFFFFF;
	}
}

@media (max-width: 320px) {
	#content .letter3 {
		margin: 0 5px 0 0;
	}
}

/*===== 四角背景付き文字 =====*/
.border_green {
	display: flex;
	align-items: center;
	font-size: 150%;
	border-radius: 25px 0 0 25px;
	background-color: #a9e5bb;
}

.border_blue {
	display: flex;
	align-items: center;
	font-size: 170%;
	border-radius: 25px 0 0 25px;
	background-color: #d8dcff;
	padding-right: 35px;
}

.border_orange {
	display: flex;
	align-items: center;
	font-size: 170%;
	border-radius: 25px 0 0 25px;
	background-color: #ff9999;
}

.border_pink {
	display: block;
	align-items: center;
	font-size: 150%;
	line-height: 1.3;
	background-color: #FFDDEB;
	padding: 10px 5px 10px 5px;
}

#content p.border_pink {
    line-height: 1.3;
}

.mw_content a:hover ,.acon01_content a :hover,#QA_content a:hover  {
color: #333;
}

.border_blue:hover,
.border_blue:active,
.border_blue:focus {
	background-color: #BFC5F4;
}

a .border_blue {
	color: #333;
}

a .border_blue:hover,
a .border_blue:focus {
	color: #333;
}

@media (max-width: 515px) {
	.border_green {
		font-size: 140%;
	}
	
	.border_blue {
		font-size: 140%;
	}
	
	.border_orange {
		font-size: 140%;
	}
	
	.border_pink {
		font-size: 140%;
		display: flex;
		flex-flow: row;
	}
}

@media (max-width: 320px) {
	.border_green {
		font-size: 120%;
	}

	.border_blue {
		font-size: 120%;
	}

	.border_orange {
		font-size: 120%;
	}
	.border_pink {
		font-size: 120%;
	}
}



/*===== アコーディオン =====*/
.mw_content .list-group-item {
	position: relative;
	display: block;
	padding: 0;
	margin-bottom: 0px;
	background-color: #fff;
	border: 0px solid #ddd;
}

.mw_content a.list-group-item:hover,
.mw_content a.list-group-item:focus {
	background-color: #fff;
}

.mw_content .accordion-toggle a.collapsed::after {
	right: 20px;
}

.mw_content .accordion-toggle a::after {
	right: 20px;
}

.acon01_content .accordion-toggle a::after {
	right: 20px;
	color: #F723B2;
}

@media (max-width: 768px) {
	.mw_content .faq_comment {
		padding: 10px;
	}
}

@media (max-width: 768px) {
    .faq_comment {
        padding: 10px 5px;
    }
}

#QA_content .list-group-item {
	border: 1px solid #F56883;
}

#QA_content .faq_list::before {
	color: #F56883;
}

#QA_content a.list-group-item.faq_list:hover {
	background-color: #FFECEF;
}


.btn {
	margin-top: 5px;
}

.container_nav .btn {
	margin-top: 0px;
}

.btn.btn-square {
	border-radius: 0;
	padding: 15px 17px;
	font-size: 18px;
}

@media (max-width: 768px) {
.btn.btn-square {
	font-size: 16px;
	padding: 9px 17px;
}
}

#scrool_top .btn.btn-square {
	border-radius: 0;
	padding: 15px 17px;
	font-size: 15px;
}


@media (max-width: 768px) {
#scrool_top .btn.btn-square {
	font-size: 13px;
	padding: 9px 9px;
}
}



.SideBySide p {
 display:inline-block;
 vertical-align: middle; /*縦方向の揃え位置を指定*/
 margin-bottom: 0;
}

.SideBySide p img{
 height: 30px;
}


.bg-blk {
    height: 100%;
    background: rgba(0,0,0,0.7);
}



/*hover coler*/

.hover_blue:hover {
	background: rgba(66,139,202,0.50);
}
.hover_pink:hover {
	background: rgba(251,90,100,0.50);
}
.hover_yellow:hover {
	background: #FFC000;
}

.btn-outline.btn-default.hover_yellow:hover,
.btn-outline.btn-default.hover_yellow:active{color:#333;background:#FFC000;border-color:#FFC000;}


/*下線*/

.text-line {
    height: 24px;
    margin: 0px auto 3px auto;
    border-bottom: 2px solid #F879D7;
}

.text-line.blue_l {
    border-bottom: 2px solid #408DDE;
}
.text-line.green_l {
    border-bottom: 2px solid #3AA851;
}
.text-line.red_l {
    border-bottom: 2px solid #A32D2D;
}
.text-line.purple_l {
    border-bottom: 2px solid #612CA3;
}
.text-line.orange_l {
    border-bottom: 2px solid #DE8234;
}


.modal-dialog{
  display: flex;
  align-items: center;
  min-height: 100%;
}


/* 枠のradius指定 */

.module.r20 {
	border-radius: 20px;
}


.module-blue {
	background: #ACE6FA;
}

.module-yellow {
	background-color: #fcf8b1;
}


.bg-warning {
	text-indent: 0;
}

.bg-pink {
 background-color: #F723B2;
}

/** 02. SNS ICON
 **************************************************************** **/
#top-text {
	position: relative;
	padding-bottom: 4rem;
	color: #fff;
}

#top-text #sns-icon {
	position: absolute;
	bottom: 0px;
	right: 0px;
}

@media all and (max-width: 768px) {
	#content #sns-icon {
	}
}
#sns-icon ul.sns-icon {
	list-style: none;
	padding: 0;
}

#sns-icon ul.sns-icon li {
	float:right;
	padding-left:6px;
	font-size: 5rem;
	line-height: 1.0;
}

#sns-icon ul.sns-icon li.Instagram a {
	color: #ea4c89;
}

#sns-icon ul.sns-icon li.Instagram:hover a {
	color: #ED699C;
}

#sns-icon ul.sns-icon li.facebook a {
	color: #3B5998;
}

#sns-icon ul.sns-icon li.facebook:hover a {
	color: #6d84b4;
}

#sns-icon ul.sns-icon li.twitter a {
	color: #2B7BB9;
}

#sns-icon ul.sns-icon li.twitter:hover a {
	color: #1DA1F2;
}

#sns-icon ul.sns-icon li.line a {
	color: #00B525;
}

#sns-icon ul.sns-icon li.line:hover a {
	color: #00c300;
}





/** 03. Buttons
 **************************************************************** **/
.top_btnmenu .btn {
	white-space: normal;
	padding: 15px 5px;
	border-radius: 0px;
	font-size: 1em;
}

@media all and (max-width: 480px) {
	.container_nav [class*='col-'] {
		padding-right: 5px;
		padding-left: 5px;
	}

	.top_btnmenu .btn {
		font-size: 0.9em;
	}
}

.top_btnmenu {
	display: table;
	width: 100%;
}

.top_btnmenu .row_center {
	display: table-cell;
	vertical-align: middle;
}

.btn-outline.btn-default {
	border: 0px solid #ccc;
}

.btn-outline.btn-white       {background:none;border:2px solid #fff;color:#fff;background-color: #fff;}
.btn-outline.btn-white:hover,
.btn-outline.btn-white:active{color:#333;background:#fff;border-color:#fff;}
.btn-outline.btn-pink       {background:#F56883;border:0px solid #fff;color:#fff;background-color: #F56883;}
.btn-outline.btn-pink:hover,
.btn-outline.btn-pink:active{color:#F56883;background:#fff;border-color:#fff;}
.btn-outline.backnon {
	background-color: rgba(255,255,255,0.00);
	color: #fff;
}





/** 04. bootstrap panel 調整
 **************************************************************** **/
.panel {
	margin-bottom: 0px;
	margin-top: 10px;
}

.panel h4,
.panel .h4 {
	margin-top: 0px;
	margin-bottom: 0px;
}

@media (max-width: 768px) {
	.panel {
		margin-bottom: 0px;
		margin-top: 5px;
	}
}

.panel-info {
	border-color: #6FBCF6;
}

.panel-info > .panel-heading {
	color: #fff;
	background-color: #6FBCF6;
	border-color: #6FBCF6;
}

.panel-info > .panel-heading + .panel-collapse > .panel-body {
	border-top-color: #6FBCF6;
}

.panel-info > .panel-heading .badge {
	color: #fff;
	background-color: #6FBCF6;
}

.panel-info > .panel-footer + .panel-collapse > .panel-body {
	border-bottom-color: #6FBCF6;
}

.panel-yellow {
	border-color: #F5C53A;
}

.panel-yellow > .panel-heading {
	color: #fff;
	background-color: #F5C53A;
	border-color: #F5C53A;
}

.panel-yellow > .panel-heading + .panel-collapse > .panel-body {
	border-top-color: #F5C53A;
}

.panel-yellow > .panel-heading .badge {
	color: #fff;
	background-color: #F5C53A;
}

.panel-yellow > .panel-footer + .panel-collapse > .panel-body {
	border-bottom-color: #F5C53A;
}

.panel-green {
	border-color: #97C143;
}

.panel-green > .panel-heading {
	color: #fff;
	background-color: #97C143;
	border-color: #97C143;
}

.panel-green > .panel-heading + .panel-collapse > .panel-body {
	border-top-color: #97C143;
}

.panel-green > .panel-heading .badge {
	color: #fff;
	background-color: #97C143;
}

.panel-green > .panel-footer + .panel-collapse > .panel-body {
	border-bottom-color: #97C143;
}





/** 05. label 調整
 **************************************************************** **/
.label {
	color: #2E2E2E;
	margin: 0 0.5em 0 0.5em;
}

.label-white {
	background-color: #fff;
}

.label-white[href]:hover,
.label-white[href]:focus {
	background-color: #fff;
}





/** 06. 蛍光マーカー風 追加
 **************************************************************** **/
.marker.yellow2 {
	padding: 0.2em;
	color: inherit;
	background: linear-gradient(transparent 0%, #F5C53A 0%);
}

.marker.yellow2.thin {
	color: inherit;
	background: linear-gradient(transparent 70%, #F5C53A 70%);
}

.marker.pink {
	padding: 0.2em;
	color: inherit;
	background: linear-gradient(transparent 0%, #FF60AF 0%);
}

.marker.pink.thin {
	color: inherit;
	background: linear-gradient(transparent 70%, #FF60AF 70%);
}

.marker.blue {
	padding:0.2em;
	color: inherit;
	background: linear-gradient(transparent 0%, #6FBCF6 0%);
}

.marker.blue.thin {
	color: inherit;
	background: linear-gradient(transparent 70%, #6FBCF6 70%);
}

.marker.green {
	padding: 0.2em;
	color: inherit;
	background: linear-gradient(transparent 0%, #97C143 0%);
}

.marker.green.thin {
	color: inherit;
	background: linear-gradient(transparent 70%, #97C143 70%);
}

.marker.orange {
	padding: 0.2em;
	color: inherit;
	background: linear-gradient(transparent 0%, #FEBD4D 0%);
}

.marker.orange.thin {
	color: inherit;
	background: linear-gradient(transparent 70%, #FEBD4D 70%);
}

.marker.white {
	padding: 0.2em;
	color: inherit;
	background: linear-gradient(transparent 0%, #fff 0%);
}

.marker.white.thin {
	color: inherit;
	background: linear-gradient(transparent 70%, #fff 70%);
}





/** 07. 矢印
 **************************************************************** **/
.arrow_r {
	position: relative;
	height: 16px;
	width: 16px;
	background-color: #cdcee6;
	margin: 0 10px 0 0;
}

.arrow_r::before {
	position: absolute;
	content: "";
	border: solid 16px transparent;
	border-left: solid 16px  #cdcee6;
	top: -8px;
	left: 12px;
}

.arrow_b {
	position: relative;
	height: 16px;
	width: 16px;
	margin: 0px 0 20px 0px;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.arrow_b::before {
	position: absolute;
	content: "";
	border: solid 16px transparent;
	top: -8px;
	left: 12px;
}

.arrow_b.blue1 {
	color: #fff;
	border: 1px solid #6FBCF6;
	background: #6FBCF6;
}

.arrow_b.blue1::before {
	border-left: solid 16px #6FBCF6;
}

.arrow_b.yellow1 {
	color: #fff;
	border: 1px solid #F5C53A;
	background: #F5C53A;
}

.arrow_b.yellow1::before {
	border-left:solid 16px #F5C53A;
}

.arrow_b.green1 {
	color: #fff;
	border: 1px solid #97C143;
	background: #97C143;
}

.arrow_b.green1::before {
	border-left: solid 16px #97C143;
}

.col-sm-1.center-block {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 -30px;
}

.center-block {
	display: flex;
	align-items: center;
	justify-content: center;
}

.work-page .row figure {
	margin-bottom: 0em;
}

.work-page .row figure {
	margin-bottom: 1em;
}

.col-sm-12.center-block {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}





/** 08. 背景 追加
 **************************************************************** **/
.contact.yellow2 {
	border: solid #FCF3BB 2px;
	background-color: #FCF3BB;
	color: inherit;
}

.yellow3 {
	border:solid #faf3dd 0px;
	background-color: #faf3dd;
	color: inherit;
}

.contact.green {
	border:solid #E2FCD2 2px;
	background-color: #E2FCD2;
	color: inherit;
}

.contact.orange {
	border:solid #DB8F34 2px;
}

/*.contact.blue {
	border: solid #e1f0fa 2px;
	background-color: #e1f0fa;
	color: inherit;
}
*/




/** 09. 数字カウンターリスト
 **************************************************************** **/
/* 角数字カウンターリスト*/
ol.calender_list {
	counter-reset: my-counter;
	list-style: none;
	padding: 0;
}

ol.calender_list li {
	margin-bottom: 10px;
	padding-left: 30px;
	position: relative;
}

ol.calender_list li::before {
	content: counter(my-counter);
	counter-increment: my-counter;
	background-color: #52A7E0;
	color: #fff;
	display: block;
	float: left;
	line-height: 22px;
	margin-left: -30px;
	text-align: center;
	height: 22px;
	width: 22px;
}

.contact.yellow2 ol.calender_list li::before {
	border: solid #F5C53A 2px;
	background-color: #F5C53A;
	color: inherit;
}

.contact.green ol.calender_list li::before {
	border: solid #97C143 2px;
	background-color: #97C143;
	color: inherit;
}
.contact.blue ol.calender_list li::before {
	border: solid #217dbb 2px;
	background-color: #217dbb;
	color: inherit;
}

/* 丸数字カウンターリスト */
#content ol.calender_list2 {
	counter-reset: my-counter;
	list-style: none;
	padding: 0;
}

#content ol.calender_list2 li {
	margin-bottom: 10px;
	padding-left: 30px;
	position: relative;
	line-height: 1.5;
}

#content ol.calender_list2 li::before {
	font-family: 'YakuHanJP',"游ゴシック体", YuGothic, "YuGothic M", sans-serif;
	position: absolute;
	content: counter(my-counter);
	counter-increment: my-counter;
	background-color: #fff;
	color: #F56883;
	display: block;
	float: left;
	top: 4px;
	line-height: 21px;
	margin-left: -30px;
	text-align: center;
	height: 25px;
	width: 25px;
	border-radius: 50%;
	font-weight: bold;
	border: solid 1px #F56883;
}

#content .contact.yellow2 ol.calender_list li::before {
	border:solid #F5C53A 2px;
	background-color: #F5C53A;
	color: inherit;
}

#content .contact.green ol.calender_list li::before {
	border: solid #008000 2px;
	background-color: #008000;
	color: inherit;
}

#content .contact.blue ol.calender_list li::before {
	border: solid #217dbb 2px;
	background-color: #217dbb;
	color: inherit;
}

@media all and (max-width: 768px) {
	#content .nav > li > a {
		text-decoration: none;
		font-size: 0.8em;
		padding: 10px 8px;
	}
	
	ol.calender_list2 li::before {
		top: 2px;
		height: 22px;
		width: 22px;
	}
}

@media all and (max-width: 320px) {
	#content .nav > li > a {
		text-decoration: none;
		font-size: 0.7em;
		padding: 10px 8px;
	}
}





/** 10. thumbnail関連
 **************************************************************** **/
#tiles {
	padding: 0;
	margin-left: -5px !important;
	margin-right: -5px !important;
	padding-left: 10px;
	padding-right: 10px;
}

#tiles > .row {
}

#tiles .tile {
	padding-left: 5px;
	padding-right: 5px;
}

@media (max-width: 768px) {
	#tiles .tile {
		padding-left: 2px;
		padding-right: 2px;
	}
}

#tiles .btn {
	padding: 9px 5px;
}





/** 11. 画像の上に文字
 **************************************************************** **/
.example {
	position: relative;
	margin: 20px 0;
}

.example2 {
	position: relative;
}

#content .example a {/*aタグを画像の真ん中に*/
	position: absolute;
	width: 150px;
	top: 50%;
	left: 20%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	/*以下装飾*/
	font-size: 2.5em;/*文字サイズ*/
	padding: 15px 7px;/*余白*/
	color: #333;/*文字色*/
	text-decoration: none;/*下線を表示させない*/
	text-align: center;
	line-height: 1.1;
	font-weight: 800;
}

#content .example a .subtitle {
	font-size: 0.5em;
}

#content .example a.wu {
	left: 20%;
	/*以下装飾*/
	background-color: #a9e5bb;
}

#content .example a.mw {
	left: 45%;
	/*以下装飾*/
	background-color: #d8dcff;
}

#content .example a.ft {
	left: 70%;
	/*以下装飾*/
	background-color: #ff9999;
}

#content .example2 .white_bk {
	/*以下装飾*/
	position: absolute;
	width: 100%;
	top: 0;
	left: 50%;
	padding: 10px;
	font-size: 1.2em;/*文字サイズ*/
	-ms-transform: translate(-50%,0%);
	-webkit-transform: translate(-50%,0%);
	transform: translate(-50%,0%);
	background-color: rgba(255,255,255,0.80);/*文字色*/
	text-align: center;
}

#content .example a.wu:hover {
	background: #38A98C;
}

#content .example a.mw:hover {
	background: #BFC5F4;
}

#content .example a.ft:hover {
	background: #EF8080;
}

.example img ,
.example2 img {
	width: 100%;
}

@media (max-width: 768px) {
	#content .example {
		margin: 25px 0;
	}
	
	#content .example a {
		font-size: 1.2em;/*文字サイズ*/
		width: 110px;
	}
	
	#content .example2 .white_bk {/*aタグを画像の真ん中に*/
		/*以下装飾*/
		position: relative;
		width: 100%;
		bottom: 0;
		left: 50%;
		padding: 10px;
		font-size: 0.9em;/*文字サイズ*/
		-ms-transform: translate(-50%,0%);
		-webkit-transform: translate(-50%,0%);
		transform: translate(-50%,0%);
		background-color: rgba(255,255,255,0.20);/*文字色*/
		text-align: left;
	}
}

@media (max-width: 480px) {
	#content .example a {
		font-size: 1.2em;
		width: 80px;
	}
}

@media (max-width: 320px) {
	#content .example a {
		font-size: 1.2em;
		width: 70px;
	}
	
	#content .example a.wu {
		left: 15%;
		/*以下装飾*/
		background-color: #a9e5bb;
	}
	
	#content .example a.mw {
		left: 45%;
		/*以下装飾*/
		background-color: #d8dcff;
	}
	
	#content .example a.ft {
		left: 75%;
		/*以下装飾*/
		background-color: #ff9999;/*文字色*/
	}
}






/** 12. Bootstrap 機能拡張
 **************************************************************** **/
/* カラムのセンター揃え　機能拡張 */
.row-center {
	text-align: 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;
}





/** 13. インデント追加
 **************************************************************** **/
.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_045 {
	display: block;
	padding-left: 4.5em;
	text-indent: -4.5em;
}

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

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





/** 14. Box
 **************************************************************** **/
#container .box {
	padding: 1em;
	border: none;
	margin-bottom: 1rem;
}

/*===== Box 背景色追加 =====*/
#container .box.black {
	background-color: #333333;
	color: #FFFFFF;
}

#container .box.gray {
	background-color: #444444;
	color: #FFFFFF;
}

#container .box.gray2 {
	background-color: rgba(114,114,114,0.70);
	color: #FFFFFF;
	border: 3px solid #333
}

#container .box.blue {
	background-color: #2F98B7;
	color: #FFFFFF;
}

#container .box.blue2 {
	background-color: #d8dcff;
	color: #FFFFFF;
}

#container .box.green {
	background-color: #00AC56;
	color: #FFFFFF;
}

#container .box.green2 {
	background-color: #a9e5bb;
	color: #FFFFFF;
}

#container .box.olive {
	background-color: #6C8F28;
	color: #FFFFFF;
}

#container .box.pink {
	background-color: #F56883;
	color: #FFFFFF;
}

#container .box.pink2 {
	background-color: #ff3399;
	color: #FFFFFF;
}
#container .box.blue1 {
	background-color: #004E89;
	color: #FFFFFF;
	margin: 0;
}

#container .box.blue1 .logoimg {
	width: 150px;
}

#container .box.orange {
	background-color: #EF990F;
	color: #FFFFFF;
}
#container .box.orange2 {
	background-color: #ff9999;
	color: #FFFFFF;
}

#container .box.yellow {
	background-color: #F5C53A;
	color: #333;
}

#container .box.default {
	background-color: #FFFFFF;
}

#container .box.lightblue {
	margin: 0;
	background-color: #e1f0fa;
	box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.0);
}

#container .box.lightpink {
	background-color: #FFB0D7;
	color: #333;
}

#container .box.mbtm0 {
	margin-bottom: 0;
}

#container .box.mtop0 {
	margin-top: 0;
}

#container .box h3 {
	margin-top: 0;
	margin-bottom: 0;
}

#container .box.gray h3 {
	margin-bottom: 0px;
}

#container .box ul,
#container .box ol {
	margin: 0;
}





/** 15. ドロワーメニュー
 **************************************************************** **/

#container .fullview4 {
	width: 100vw;
	height: 100%;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}


.tab-pane.wrapper {
  display: none;
}

.tab-pane.active.wrapper {
display: block;
  height: 100%;
  overflow-x: hidden;
  position: relative;
}
.overlay2 {
  content: "";
  display: block;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity .5s;
}
.overlay2.open {
  width: 100%;
  height: 100%;
  opacity: 1;

}
main {
  height: 100%;
  min-height: 100vh;
  padding: 0 50px;
  background-color: #eee;
  transition: all .5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
main.open {
  transform: translateX(-250px);
}
main h1 {
  text-align: center;
  font-weight: 500;
}
main p {
  text-align: center;
}
.menu-trigger2 {
 position: fixed;
  top: 80px;
  right: 5px;
  width: 53px;
  height: 53px;
  padding: 19px 17px 0;
  background: #000;
  border-radius: 50%;
  cursor: pointer;
  z-index: 100;
}

.menu-trigger2 > div {
  position: relative;
}


/* .menu-trigger.active {
  transform: translateX(-250px);
}
 */
.menu-trigger2 span {
  width: 100%;
  height: 2px;
  left: 0;
  display: block;
  background: #fff;
  position: absolute;
  transition: 0.35s ease-in-out;
}
.menu-trigger2.active span {
  background-color: #fff;
}
.menu-trigger2 span:nth-of-type(1) {
  top: 0;
}
.menu-trigger2.active span:nth-of-type(1) {
  top: 7px;
  transform: rotate(45deg);
}
.menu-trigger2 span:nth-of-type(2) {
  top: 7px;
}
.menu-trigger2.active span:nth-of-type(2) {
  width: 0;
  left: 50%;
}
.menu-trigger2 span:nth-of-type(3) {
  top: 14px;
}
.menu-trigger2.active span:nth-of-type(3) {
  top: 7px;
  transform: rotate(-45deg);
}

nav.nav2 {
  width: 350px;
  height: 100%;
  padding-top: 100px;
  background-color: rgb(16, 69, 153, 0.8);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  transform: translate(350px);
  transition: all .5s;
}

nav.nav2 button{
      background-color: rgba(255,255,255,0.00);
			border :solid 0px #fff;
}

nav.nav2 ul {
    list-style-type: none;
		padding-left: 0;
}

nav.nav2.open {
  transform: translateZ(0);
}
nav.nav2 li {
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

nav li a {
  color: #fff;
}

nav li a:hover,
nav li a:active,
nav li a:focus {
  color: #fff;
}


/*************soical icons**********/
.social-1{
    margin: 0;
    padding: 0;
}

.social-1 li{
    display: inline-block;
}
.social-1 li a i{
    width:42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    color:#fff;
    font-size: 16px;
    -webkit-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}

.social-1 li.twitter a svg {
width:42px;
	height: 42px;
	padding: 12px;
}
.social-1 li a i:hover{
    opacity: 0.8;
}
.social-1 li a i.fa-facebook{
    background-color: #3b5998;
}
.social-1 li a i.fa-twitter{
    background-color: #0084b4;

}
.social-1 li.twitter a svg{
	background-color: #000000;
	position: relative;
	top:-2px;
}
.social-1 li a i.fa-instagram{
    background-color: #ea4c89;
}


/** 16. 順番に現れる
 **************************************************************** **/






/*========= レイアウトのためのCSS ===============*/


.flex{
  display:flex;
  flex-wrap: wrap;
}

#container .fullview3 .fullview-inner4 .box{
  width: 220px;
	height:100px;
  padding: 20px;
    margin: 0;
  color: #fff;
  box-sizing:border-box;
	border: 0px solid #333;
}

/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.fullview-inner4 .box{
  opacity: 0;
}

/*==================================================
ふわっ
===================================*/

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}


@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time00{
animation-delay: 0s;
position: absolute;
left: 0;
top: 50%;
background: center / auto no-repeat url("../images/00.svg");
}

.delay-time00:hover{
background: center / auto no-repeat url("../images/00_over.svg");
}


.delay-time02{
animation-delay: 0.2s;
position: absolute;
left: 15%;
top: 0;
background: center / auto no-repeat url("../images/01.svg");
}

.delay-time02:hover{
background: center / auto no-repeat url("../images/01_over.svg");
}


.delay-time04{
animation-delay: 0.4s;
position: absolute;
right: 0;
bottom: 0;
background: center / auto no-repeat url("../images/03.svg");
}

.delay-time04:hover{
background: center / auto no-repeat url("../images/03_over.svg");
}


.delay-time_non01{
position: absolute;
left: 10%;
bottom: 0;
background: center / auto no-repeat url("../images/04.svg");
}

.delay-time_non01:hover{
background: center / auto no-repeat url("../images/04_over.svg");
}


.delay-time_non02{
position: absolute;
right: 10%;
top: 50px;
background: center / auto no-repeat url("../images/05.svg");
}

.delay-time_non02:hover{
background: center / auto no-repeat url("../images/05_over.svg");
}

.delay-time_non01.box , .delay-time_non02.box {
  opacity: 1;
}

@media (max-width: 768px) {
#container .fullview3 .fullview-inner4 .box{
  width: 200px;
	height:80px;
  padding: 20px;
    margin: 0;
  color: #fff;
  box-sizing:border-box;
}
}

@media (max-width: 500px) {

#container .fullview3 .fullview-inner4 .box{
  width: 150px;
	height:80px;
  padding: 20px;
    margin: 0;
  color: #fff;
  box-sizing:border-box;
}

.delay-time00{
animation-delay: 0s;
position: absolute;
left: 0%;
top: 50%;
background: center / auto no-repeat url("../images/00.svg");
}

.delay-time00:hover{
background: center / auto no-repeat url("../images/00_over.svg");
}


.delay-time02{
animation-delay: 0.2s;
position: absolute;
left: 0;
top: 0;
background: center / auto no-repeat url("../images/01.svg");
}

.delay-time02:hover{
background: center / auto no-repeat url("../images/01_over.svg");
}


.delay-time04{
animation-delay: 0.4s;
position: absolute;
right: 0;
bottom: 50px;
background: center / auto no-repeat url("../images/03.svg");
}

.delay-time04:hover{
background: center / auto no-repeat url("../images/03_over.svg");
}


.delay-time_non01{
position: absolute;
left: 10%;
bottom: 0;
background: center / auto no-repeat url("../images/04.svg?211217");
}

.delay-time_non01:hover{
background: center / auto no-repeat url("../images/04_over.svg?211217");
}


.delay-time_non02{
position: absolute;
right: 0;
top: 100px;
background: center / auto no-repeat url("../images/05.svg");
}

.delay-time_non02:hover{
background: center / auto no-repeat url("../images/05_over.svg");
}

.fullview-inner4 .delay-time_non01.box , .fullview-inner4 .delay-time_non02.box {
  opacity: 1;
}




}




/** 08. アニメーション丸ボタン
 **************************************************************** **/
.btn04 {
	color: #5B81C9;
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	position: relative;
	z-index: 10;
	display: table;
	width: 250px;
	height: 250px;
	margin: 10px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 50%;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	box-shadow:
		0 0 0 10px #fff,
		0 0 0 12px #5B81C9;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}

.btn04.green {
	color: #fff;
	box-shadow:
		0 0 0 10px #3AA107,
		0 0 0 12px #fff;
}

.btn04.orange {
	color: #fff;
	box-shadow:
		0 0 0 10px #EA973F,
		0 0 0 12px #fff;
}

.btn04.blue {
	color: #fff;
	box-shadow:
		0 0 0 10px #2279B4,
		0 0 0 12px #fff;
}

.btn04.purple {
	color: #fff;
	box-shadow:
		0 0 0 10px #7030A0,
		0 0 0 12px #fff;
}

.btn04.red {
	color: #fff;
	box-shadow:
		0 0 0 10px #D8107D,
		0 0 0 12px #fff;
}

.btn04:hover {
	color: #fff;
}

.btn04.green:hover {
	color: #fff;
}

.btn04.orange:hover {
	color: #EA973F;
}

.btn04.blue:hover {
	color: #2279B4;
}

.btn04.purple:hover {
	color: #7030A0;
}

.btn04.red:hover {
	color: #ffffff;
}

.btn04 a{
	color: #5B81C9;
	font-size: 20px;
	font-weight: bold;
}

.btn04 a:hover {
	color: #fff;
}

.btn04 span.btn_text{
	display: table-cell; /* IE8から使用可能 */
	vertical-align: middle;
}

.btn04 .btn_text{
	display: table-cell; /* IE8から使用可能 */
	vertical-align: middle;
}

.btn04::before {
	white-space: normal;
	content: '';
	background-color: #fff;
	display: block;
	position: absolute;
	width: 250px;
	height: 250px;
	z-index: -1;
	border-radius: 50%;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	box-shadow:
		0 0 0 10px #fff,
		0 0 0 12px #5B81C9;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}

.btn04::after {
	white-space: normal;
	font-family: "Font Awesome 5 Free";
	content: "\f0d7";
	color: #3AA107;
	font-size: 55px;
	line-height: 55px;
	background-color: #fff;
	display: block;
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 55px;
	height: 55px;
	z-index: -1;
	border-radius: 50%;
	box-shadow:
	0 0 0 0px #fff,
	0 0 0 2px #3AA107;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}

.btn04:hover::after {
	white-space: normal;
	font-family: "Font Awesome 5 Free";
	content: "\f0d7";
	color: #fff;
	font-size: 55px;
	line-height: 55px;
	background-color: #3AA107;
	display: block;
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 55px;
	height: 55px;
	z-index: -1;
	border-radius: 50%;
	box-shadow:
	0 0 0 0px #3AA107,
	0 0 0 2px #fff;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}

.btn04.green::before  {
background: linear-gradient(#3AA107, #73A25C);
	box-shadow:
		0 0 0 10px #3AA107,
		0 0 0 12px #fff;
}

.btn04.orange::before  {
	background-color: #EA973F;
	box-shadow:
		0 0 0 10px #EA973F,
		0 0 0 12px #fff;
}

.btn04.blue::before  {
	background-color: #2279B4;
	box-shadow:
		0 0 0 10px #2279B4,
		0 0 0 12px #fff;
}

.btn04.purple::before  {
	background-color: #7030A0;
	box-shadow:
		0 0 0 10px #7030A0,
		0 0 0 12px #fff;
}

.btn04.red::before  {
	background: linear-gradient(#D8107D, #E36728);
	box-shadow:
		0 0 0 10px #D8107D,
		0 0 0 12px #fff;
}

.btn04:hover::before {
	color: #fff;
	background-color: #7897D2;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	box-shadow:
		0 0 0 12px #fff,
		0 0 0 14px #5B81C9;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}

.btn04.green:hover::before {
	color: #fff;
	background-color: #fff;
	box-shadow:
		0 0 0 12px #548235,
		0 0 0 14px #fff;
}

.btn04.orange:hover::before {
	color: #EA973F;
	background-color: #fff;
	box-shadow:
		0 0 0 12px #EA973F,
		0 0 0 14px #fff;
}

.btn04.blue:hover::before {
	color: #2279B4;
	background-color: #fff;
	box-shadow:
		0 0 0 12px #2279B4,
		0 0 0 14px #fff;
}

.btn04.purple:hover::before {
	color: #7030A0;
	background-color: #fff;
	box-shadow:
		0 0 0 12px #7030A0,
		0 0 0 14px #fff;
}

.btn04.red:hover::before {
	color: #ffffff;
	background-color: #fff;
	box-shadow:
		0 0 0 12px #D8107D,
		0 0 0 14px #fff;
}


@media (max-width: 768px) {
.btn04 {
	color: #5B81C9;
	text-decoration: none;
	text-align: center;
	position: relative;
	z-index: 10;
	display: table;
	width: 150px;
	height: 150px;
	margin: 10px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 50%;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	box-shadow:
		0 0 0 10px #fff,
		0 0 0 12px #5B81C9;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}

.btn04:hover {
	color: #fff;
}

.btn04 span.btn_text{
	display: table-cell; /* IE8から使用可能 */
 	vertical-align: middle;
}

.btn04 span.btn_text {
	font-size: 12px;
}

.btn04::before {
	white-space: normal;
	content: '';
	background-color: #fff;
	display: block;
	position: absolute;
	width: 150px;
	height: 150px;
	z-index: -1;
	border-radius: 50%;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	box-shadow:
		0 0 0 10px #fff,
		0 0 0 12px #5B81C9;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
}

.btn04:hover::before {
	color: #fff;
	background-color: #7897D2;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	box-shadow:
		0 0 0 12px #fff,
		0 0 0 14px #5B81C9;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}

.btn04::after {
	font-size: 30px;
	line-height: 35px;
	right: -20px;
	bottom: -10px;
	width: 35px;
	height: 35px;
	z-index: -1;
	border-radius: 50%;
	box-shadow:
		0 0 0 0px #fff,
		0 0 0 2px #548235;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}

.btn04:hover::after {
	white-space: normal;
	font-family: "Font Awesome 5 Free";
	content: "\f0d7";
	color: #fff;
	font-size: 30px;
	line-height: 45px;
	background-color: #548235;
	display: block;
	position: absolute;
	right: -30px;
	bottom: -10px;
	width: 45px;
	height: 45px;
	z-index: -1;
	border-radius: 50%;
	box-shadow:
	0 0 0 0px #548235,
	0 0 0 2px #fff;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}
}




@media (max-width: 480px) {
.btn04 {
	color: #5B81C9;
	text-decoration: none;
	text-align: center;
	position: relative;
	z-index: 10;
	display: table;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	box-shadow:
		0 0 0 10px #fff,
		0 0 0 12px #5B81C9;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}

.btn04:hover {
	color: #fff;
}

.btn04 span.btn_text{
	display: table-cell; /* IE8から使用可能 */
	vertical-align: middle;
}

.btn04::before {
	white-space: normal;
	content: '';
	background-color: #fff;
	display: block;
	position: absolute;
	width: 120px;
	height: 120px;
	z-index: -1;
	border-radius: 50%;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	box-shadow:
		0 0 0 10px #fff,
		0 0 0 12px #5B81C9;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}

.btn04:hover::before {
	color: #fff;
	background-color: #7897D2;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	box-shadow:
		0 0 0 12px #fff,
		0 0 0 14px #5B81C9;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}
}






/** 09. HEADER
 **************************************************************** **/
/*===== HEADER =====*/
div[role="header"] {
	width: 100%;
	height: 100vh;
	text-align: center;
	background: #fff;
}

div[role="header"] {
	width: 100%;
	height: 50vh;
	text-align: center;
	background: #fff;
}

div.row {
	margin-bottom: 0;
}

#juku {
	position: relative;
}

#juku_header {
	position: relative;
}

div[role="header"] .catch {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	width: 50%;
	height: 35%;
	border-top: solid 1px #fff;
	border-bottom: solid 1px #fff;
	padding: 20px 10px;
	animation: fadeIn 8s ease 0 1 normal;
	-webkit-animation: fadeIn 8s ease 0 1 normal;
	z-index: 3;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

div[role="header"] .catch > h1 {
	display: flex;
	-webkit-align-items: center;
	-webkit-justify-content: center;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-size: 1.2rem;
	text-align: center;
	color: #333;
	padding: 0 2rem;
}

div[role="header"] .catch > h1 img {
	width: 100%;
	height: auto;
}

div[role="header"] .catch2 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	width: 100%;
	height: auto;
	padding: 20px 10px;
	animation: fadeIn 8s ease 0 1 normal;
	-webkit-animation: fadeIn 8s ease 0 1 normal;
	z-index: 3;
}

div[role="header"] .catch2 > h1 img {
	width: 80px;
	height: auto;
	left: 0;
	bottom: 0;
	position: absolute;
	opacity: 0.9;
}



@media ( max-width : 768px ) {
div[role="header"] .catch {
		width: 60%;
		height: 20%;
	}
}


@media ( max-width : 480px ) {
	div[role="header"] .catch {
		width: 80%;
	}
}



@media ( min-width : 960px ) {
	div[role="header"] .catch > h1 {
		font-size: 1.8rem;
	}
	div[role="header"] .catch2 > h1 img {
		width: 100px;
		height: auto;
		left: 0;
		bottom: 0;
		position: absolute;
		opacity: 0.9;
	}
}
/*===== //HEADER =====*/






/*===== HEADER SLIDER =====*/
.slider_css {
	height: 70vh;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}



.slider_css ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.slider_css ul li {
	background-size: contain;
	width: 100%;
	height: 70vh!important;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 0;
animation-iteration-count: infinite;
	animation-duration: 15s;
}

.slider_css ul li:before {
	z-index: 0;
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255,255,255,0.2);
}

.slider_css ul li:nth-child(1) {
	background-image: url("../images/fullview01.jpg?260109");
	background-position: center center;
	animation-name: slider-zoomin;
	animation-delay: -2s;
}
.slider_css ul li:nth-child(2) {
	background-image: url(../images/fullview04.jpg?260109);
	background-position: center center;
	animation-name: slider-zoomin;
	opacity: 0;
	animation-delay: 3s;
}
.slider_css ul li:nth-child(3) {
	background-image: url(../images/fullview05.jpg?260109);
	background-position: center center;
	animation-name: slider-zoomin;
	opacity: 0;
	animation-delay: 8s;
}
/*.slider_css ul li:nth-child(4) {
	background-image: url(../images/fullview01.jpg);
	background-position: center center;
	animation-name: slider-zoomin;
	opacity: 0;
	animation-delay: 15s;
}*/

.slider_css ul li img {
	width:120%;
}



@media (max-width: 768px) {

.slider_css {
	height: 60vh;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
.slider_css ul li {
	background-size: cover;
	width: 100%;
	height: 60vh!important;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 0;
animation-iteration-count: infinite;
	animation-duration: 15s;
}

.slider_css ul li img {
	width:90%;
}

	.slider_css ul li:nth-child(1) {
		background-image: url(../images/fullview01.jpg?260109);
		background-position: center center;
		animation-name: slider-zoomin;
		animation-delay: -2s;
	}
	.slider_css ul li:nth-child(2) {
		background-image: url(../images/fullview04.jpg?260109);
	/*	animation-name: slider-zoomout; */
		background-position: center center;
		animation-name: slider-zoomin;
		opacity: 0;
		animation-delay: 3s;
	}
	.slider_css ul li:nth-child(3) {
		background-image: url(../images/fullview05.jpg?260109);
		background-position: center center;
		animation-name: slider-zoomin;
		opacity: 0;
		animation-delay: 8s;
	}
/*	.slider_css ul li:nth-child(4) {
		background-image: url(../images/fullview01.jpg);
		background-position: center center;
		animation-name: slider-zoomin;
		opacity: 0;
		animation-delay: 21s;
	}*/
	

}

@keyframes slider-zoomin {
	0% {
		opacity: 0;
		transform: scale(1);
	}
	12.5% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	40% {
		opacity: 0;
	}
	100% {
		opacity: 0;
		transform: scale(1.15);
	}
}

@keyframes slider-zoomout {
	0% {
		opacity: 0;
		transform: scale(1.15);
	}
	12.5% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	29.5% {
		opacity: 0;
	}
	100% {
		opacity: 0;
		transform: scale(1);
	}
}
/*===== // HEADER SLIDER =====*/



/** 10. タブ
 **************************************************************** **/


.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
   border-top: 5px solid #00BCD4;
	 background-color: #ffffff;
}
.nav-tabs > li.active.orange_line > a, .nav-tabs > li.active.orange_line > a:hover, .nav-tabs > li.active.orange_line > a:focus {
   border-top: 5px solid #FFA400;
	 background-color: #ffffff;
}

.nav-tabs > li > a {
    border-radius: 0px 0px 0 0;
		padding: 15px 25px;
		border-top: 5px solid #EFEFEF;
}



/** 11. スクロールダウンボタン
 **************************************************************** **/

#content a.scrolldown {
	position: absolute;
	bottom: -10px;
	left: 50%;
	z-index: 2;
	display: inline-block;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	text-decoration: none;
	    padding-top: 30px;
			color: #fff;
}



a.scrolldown span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    box-sizing: border-box;
}
* {
    margin: 0;
    padding: 0;
}



.container_animate {
position: relative;
}


.container_animate .animate_01 {
position: absolute;
left: 10px;
top:15px;
width: 300px;
}

@media ( max-width : 991px ) {
.container_animate .animate_01 {
position: absolute;
left: 0px;
top:15px;
width:220px;
}
}

@media ( max-width : 768px ) {
.container_animate .animate_01 {
position: absolute;
left: 10px;
top:15px;
width: 160px;
}
}

@media ( max-width : 480px ) {
.container_animate .animate_01 {
position: absolute;
left: 10px;
top:0px;
width: 120px;
}
}


/** 12. order_btn
 **************************************************************** **/


.affix-top #order_btn {
	display: none;
}

.affix #order_btn {
	position: fixed;
	bottom: 100px;
	right: 5px;
	font-size:1.1em;
	z-index:5;
}
#order_btn a {
	background: rgba(0,78,137,0.90);
	text-decoration: none;
	color: #fff;
	width: 200px;
	padding: 15px;
	text-align: center;
	display: block;
	-webkit-border-radius: 5px 0 0 5px;
	   -moz-border-radius: 5px 0 0 5px;
	        border-radius: 5px 0 0 5px;
}
#order_btn a:hover {
	text-decoration: none;
	background: rgba(0,78,137,1.00);
}
@media (max-width: 768px) {
	.affix #order_btn {
		position: fixed;
		bottom: 100px;
		right: 5px;
		font-size: 0.8em;
	}
	#order_btn a {
		background: rgba(0,78,137,0.90);
		text-decoration: none;
		border: 0px solid #fff;
		color: #fff;
		width: 80px;
		height: 80px;
		padding: 14px;
		text-align: center;
		display: block;
		-webkit-border-radius: 50%;
		   -moz-border-radius: 50%;
		        border-radius: 50%;
	}
	#order_btn a:hover {
		text-decoration: none;
		background: rgba(0,78,137,1.00);
	}
}


/** 13. 追従ボタン
 **************************************************************** **/
#Affix,#Affix2 {
	right: 0;
	position: fixed;
	bottom: 80px;
	z-index: 999;
}

#Affix.affix {
	position: fixed;
	left: 50%;
	transform: translate(-50%, 0);
	bottom:10px;
}




.affix-top a {
	display: none;
}

@media (max-width: 768px) {
.affix {
	padding: 0 20px;
}

#Affix,#Affix2 {
	z-index: 999;
	right: 10px;
	position: fixed;
	bottom: 100px;
}

}


/** 14. 吹き出し
 **************************************************************** **/
/* -------------------------------------------------- *
 * 吹き出し
 * -------------------------------------------------- */
.fukidashi_right {
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 15px;
    padding: .8em 1.2em;
    border: 3px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    color: #333333;
}

.fukidashi_right::before,
.fukidashi_right::after {
    position: absolute;
    right: -15px;
    width: 15px;
    height: 30px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: '';
}

.fukidashi_right::before {
    background-color: #2589d0;
}

.fukidashi_right::after {
    right: -11px;
    background-color: #fff;
}



.fukidashi_left {
    display: flex;
    align-items: center;
    position: relative;
    margin-left: 15px;
    padding: .8em 1.2em;
    border: 3px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    color: #333333;
}

.fukidashi_left::before,
.fukidashi_left::after {
    position: absolute;
    left: -15px;
    width: 15px;
    height: 30px;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    content: '';
}

.fukidashi_left::before {
    background-color: #2589d0;
}

.fukidashi_left::after {
    left: -11px;
    background-color: #fff;
}
@media (max-width: 578px) {

.fukidashi_right {
    display: flex;
    justify-content: center;
    position: relative;
    margin-bottom: 15px;
    padding: .8em 1.2em;
    border: 3px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    color: #333333;
}

.fukidashi_right::before,
.fukidashi_right::after {
    position: absolute;
    bottom: -15px;
		right: 45%;
    width: 30px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.fukidashi_right::before {
    background-color: #2589d0;
}

.fukidashi_right::after {
    bottom: -11px;
    background-color: #fff;
}


.fukidashi_left {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 300px;
    margin-top: 15px;
    padding: .8em 1.2em;
    border: 3px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    color: #333333;
}

.fukidashi_left::before,
.fukidashi_left::after {
    position: absolute;
    top: -15px;
		left: 45%;
    width: 30px;
    height: 15px;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    content: '';
}

.fukidashi_left::before {
    background-color: #2589d0;
}

.fukidashi_left::after {
    top: -11px;
    background-color: #fff;
}
}








.modal-wrapper {
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 40px 10px;
  text-align: center;
}

.modal-button {
    color: #4f96f6;
    background-color: #eeeeee;
    font-weight: bold;
    text-align: center;
    cursor :pointer;
    transition: all 0.3s;
    display: block;
    margin-top: 40px;
    margin-bottom: 1px;
    padding: 12px 2px;
    max-width:300px;
    text-decoration: none;
}

.modal-button:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*下に動く*/

}

/*アイコンを表示*/
.modal-button:after {
font-family: "Font Awesome 5 Free";
  content: "\f2d0";
    padding-left: 8px;
}

/*ラベルホバー時*/
.modal-button:hover {
  color: #FFFFFF;
  background-color: #4f96f6;
  transition: .6s;
}

.modal-wrapper:not(:target) {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.modal-wrapper:target {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s, visibility .4s;
}

.modal-wrapper::after {
  display: inline-block;
  height: 100%;
  margin-left: -.05em;
  vertical-align: middle;
  content: ""
}

.modal-wrapper .modal-window {
  box-sizing: border-box;
  display: inline-block;
  z-index: 20;
  position: relative;
  width: 70%;
  max-width: 600px;
  padding: 10px 30px 25px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, .6);
  vertical-align: middle
}

.modal-wrapper .modal-window .modal-content {
  max-height: 80vh;
  overflow-y: auto;
  text-align: left
}

.modal_title {
  font-size: 1.5em;
	position: relative;
	overflow: hidden;
  padding: 0;
}

.modal_title::before,
.modal_title::after{
	content: "";
	position: absolute;
	bottom: 0;
}

/* h2 プライマリカラー*/
.modal_title:before{
	border-bottom: 4px solid #6bb6ff;
	width: 100%;
}
/* h2 セカンダリカラー*/
.modal_title:after{
	border-bottom: 4px solid #c8e4ff;
	width: 100%;
}

.modal-content p {
  margin: 10px 0 0 0;
}

.modal-overlay {
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .8)
}

.modal-wrapper .modal-close {
  z-index: 20;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 35px;
  color: #95979c !important;
  font-size: 30px;
  font-weight: 700;
  line-height: 35px;
  text-align: center;
  text-decoration: none;
  text-indent: 0
}

.modal-wrapper .modal-close:hover {
  color: #2b2e38 !important
}