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

.fixed-bg {
	min-height: 80vh;
	background-attachment: fixed;
	width: 100%;
	float: left;
}

.contents .main_img .glid-right {
	background-position: center;
}

.contents .main_img .glid-right {
	border-radius: 0 0 0 50px;
}

.contents .main_img .glid-right .flam {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-image: initial;;
	text-align: center;
	vertical-align: middle;
	display: flex;
}

.contents .main_img .glid-right .flam img {
	width:100%;
	margin: auto;
}

.contents .main_img h1.en { 
	text-align: center;
	display: flex;
}

.contents .main_img h1.en img { 
	width: 100%;
	max-width: 455px;
	margin: 0 auto;
}

.contents .main_img .message {
	text-align: center;
}

.philosophy {
	font-size: 105%;
	line-height: 2em;
}

.philosophy .glid50 {
	width: 50%;
	margin: 0;
	padding: 0;
	float: left;
}

.philosophy h2 {
	width: 90%;
	margin: 0 0 20px;
	padding: 10px 0 5px 10%;
	border-radius: 0 35px 35px 0;
	background-color: #0071bb;
	color: #FFF;
	line-height:1.1em;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 5px;
}

.philosophy h2 span {
	font-size: 16px;
	letter-spacing: 0.1em;
}

.philosophy h3 {
	margin: 0 0 70px;
	color: #0071bb;
	font-size: 28px;
	line-height: 40px;
}

.philosophy .sub_title {
	width: 90%;
	margin: 0 5% 30px;
	float: left;
	color: #0071bb;
	font-size: 18px;
	font-weight: 700;
}

/* ***************************************************************** */
/*         MISSION  RAYOUT                              */
/* ***************************************************************** */

.philosophy .pyramid {
	width: 100%;
	margin: 50px 0;
	padding: 0;
	float: left;
	text-align: center;
}

.philosophy .pyramid img {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}


/* ***************************************************************** */
/*         MISSION  RAYOUT                              */
/* ***************************************************************** */

.philosophy .mission.fixed-bg {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
	background-image: url("../images/philosophy/mission_bg.webp");
	background-size: cover;
	background-position: center;
}

.philosophy .mission .filter {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 100px 0 50px;
	float: left;
	background-color: rgba(255,255,255,0.70);
	background-attachment: fixed;
}

.philosophy .mission .mb {
	display: none;
}

.philosophy .mission .box {
	width: 80%;
	max-width: 900px;
	margin: 100px auto;
	padding: 0;
	text-align: center;
	line-height: 2em;
}

/* ***************************************************************** */
/*         VISION  RAYOUT                                 */
/* ***************************************************************** */

.philosophy .vision.fixed-bg {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
	background-image: url("../images/philosophy/vision-bg.webp");
	background-size: cover;
	background-position: center;
}

.philosophy .vision .filter {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 100px 0 50px;
	float: left;
	background-color: rgba(255,255,255,0.85);
}

.philosophy .vision .box {
	width: 80%;
	max-width: 900px;
	margin: 70px auto;
	padding: 0;
	text-align: center;
	line-height: 2em;
}

.philosophy .vision .box br.mb {
	display: block;
}

/* ***************************************************************** */
/*         VALUE  RAYOUT                                 */
/* ***************************************************************** */

.philosophy .value {
	width: 100%;
	margin: 0;
	padding: 50px 0;
	float: left;
	font-size: 95%;
	line-height: 1.5em;
}

.philosophy .value h3 {
	width: 100%;
	font-size: 20px;
	text-align: center;
	margin: 5px 0 30px;
	padding: 0;
	border-bottom: double #0071bb 5px;
}

.philosophy .value h3 img {
	width: 35px;
	margin: 0 10px 0 0;
}

.philosophy .value .wrapper {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

.philosophy .value .value_inner {
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 50px 0 0;
}

.philosophy .value .box {
	width: 27%;
	height: 280px;
	margin: 0 1%;
	background-color: #FFF;
	padding: 2%;
	float: left;
	border-radius: 20px;
	box-shadow: 3px 3px 5px 1px rgba(68,66,66,0.3);
}


/* ***************************************************************** */
/*         MOTTO  RAYOUT                                 */
/* ***************************************************************** */

.philosophy .motto {
	width: 100%;
	margin: 0;
	padding: 50px 0 0;
	float: left;
}

.philosophy .motto .wrpper {
	width: 90%;
	max-width: 960px;
	margin: 50px auto;
}


.list_test-wrap {
    list-style:  none;  /* デフォルトのアイコンを消す */
    margin:  0;         /* デフォルト指定上書き */
    padding: 0;         /* デフォルト指定上書き */
}

.list_test:before {
    content:  "";     /* 空の要素作成 */
    width: 10px;                /* 幅指定 */
    height: 10px;               /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #0074bf;  /* 背景色指定 */
    position:  relative;        /* 位置調整 */
    top: 0px;                   /* 位置指定 */
    border-radius:  50%;        /* 要素を丸くする */
    margin-right: 15px;          /* 余白指定 */
}

.list_test {
    padding:  20px;             /* 余白指定 */
    background-color:  rgba(242,246,212,0.5);
    border-radius:  20px;       /* 角丸指定 */
    margin-bottom: 20px;         /* 要素と要素の間指定 */
    font-size:  20px;           /* 文字サイズ指定 */
	color: #000;
	box-shadow: 3px 3px 5px 1px rgba(68,66,66,0.3);
}


/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 1200px */
/* **************************************************************** */
@media only screen and (max-width:1200px){

.philosophy .value .box {
	width: 96%;
	height: auto;
	margin: 30px 0 0;
}

.philosophy .glid50 { width: 70%; }


}

/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 1000px */
/* **************************************************************** */

@media only screen and (max-width:1000px){

.philosophy {
	font-size: 16px;
	line-height: 1.5em;
}

.fixed-bg {
	height: auto;
	background-attachment:scroll;
}

.philosophy .mission .box {
	text-align: justify;
	margin-bottom: 50px;
}

.philosophy .vision .box {
	text-align: justify;
}

.philosophy .vision .box br.mb {
	display: none;
}


}


/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 950px */
/* **************************************************************** */

@media only screen and (max-width:950px){

.philosophy .glid50 { width: 100%; }

.contents .main_img .glid-right,
.contents .main_img .glid-right .flam {
	border-radius: 0;
}

}

/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 580px */
/* **************************************************************** */

@media only screen and (max-width:580px){

.contents .main_img {
	margin: 100px 0 0;
}

.philosophy h3 {
	font-size: 4.2vw;
	letter-spacing: 0;
	line-height: 1.7em;
}

.philosophy .mission,
.philosophy .vision {
	height: auto;
}

.philosophy .mission .box {
	width: 80%;
	margin: 0 10% 50px;
	float: left;
	letter-spacing: 0;
}

.list_test { font-size:16px; }

.philosophy .value {
	padding: 50px 0 0;
}

.philosophy .value .box {
	width: 90%;
	margin: 0 2% 30px;
	padding: 20px 3%;
}

.philosophy .motto .wrpper {
	margin: 0 auto;
}

}

/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 480px */
/* **************************************************************** */

@media only screen and (max-width:480px){

.philosophy h2 {
	width: 95%;
	padding: 10px 0 5px 5%;
}

.philosophy h2 span {
	font-size: 4vw;
	letter-spacing: 0;
}

.philosophy .sub_title {
	font-size: 4vw;
	letter-spacing: 0;
}

.philosophy .vision .sub_title {
	margin: 0 5% 0;
}

.philosophy .vision .box {
	margin: 0 auto 50px;
}

.philosophy .mission h3,
.philosophy .vision h3 {
	font-size: 5.5vw;
	margin: 0 0 30px;
	text-align: center;
}

.philosophy .mission .mb {
	display: block;
}

}