/*
Theme Name:news_sapporo-saniku
Theme URI: http://example.com/my-custom-theme/
Description: This is a custom theme
Author:tks
Author URI: http://example.com
Version: 1.0
*/
@charset "utf-8";

@font-face {
font-family: "irohamaru";
src: url("../font/irohamaru-Light.ttf") format("truetype");
}
/*--------------------------------------------------------
	reset 
---------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; }
ul,ol { list-style-type: none; }
em,strong,th,address { font-style: normal; font-weight: normal; text-align: left; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; }
img,
object,
embed { border: 0; vertical-align: top; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a{ outline: none; text-decoration: none; color: #2f2f2f;}
a img {
    pointer-events: auto;
}
a:hover{ opacity: .75;}
hr { border: none;}
table { border-collapse: collapse; border-spacing: 0; font-size: 100%; }
li { list-style-type: none; }
strong { font-weight: bold; }
/*-------------------------------------------------
	base
--------------------------------------------------*/
body {position: relative; background: #fff; color: #2f2f2f;  font-size: 18px; line-height: 1.6; -webkit-text-size-adjust: 100%;overflow-x: hidden }
.wrapper{ position: relative; overflow: hidden;}
/*-------------------------------------------------
	txt
--------------------------------------------------*/
body{ font-family: "mamelon", sans-serif; font-weight: 500; }

.txt_l { font-size: 30px; letter-spacing: 4px; line-height: 1.3; font-weight: 500;}
.txt_m { font-size: 19px;letter-spacing: 2.1px; line-height: 1.65; font-weight: 500;}
.txt_s { font-size: 18px; letter-spacing: 2px; line-height: 1.5; font-weight: 500;}

@media screen and (max-width: 1400px) {
}/*END*/
/*-------------------------------------------------
	header
--------------------------------------------------*/
header{z-index: 100; width: 100%; height: 85px;display: flex; align-items: center;position: relative; color: #0e0062;}
header a{ color: #0e0062;}
header .header_wrap{ display: flex; margin: 0 auto; white-space: nowrap; width: 100%;}
/* ロゴ */
header .header_wrap .h_logo .h_inner{ position: absolute; top: 13%;left: 2.5%;display: flex; align-items: center; }
header .header_wrap .h_logo img{ width: 66px; }
header .header_wrap .h_logo .h_logo_txt { text-align: center; margin-left: 16px;}
header .header_wrap .h_logo .h_logo_txt h3{ font-size: 13.6px; line-height: 1; margin-top: 5px;}
header .header_wrap .h_logo .h_logo_txt h1{ font-size: 34px; line-height: 1.1; letter-spacing: 1px; font-weight: 400;}
/* リスト */
header .header_wrap .page_list{ position: absolute; top: 15%; right: 0%; display: flex; align-items: flex-end;}
header .header_wrap .page_list a{ text-align: center; margin-right: 69px;}
/* アイコン */
header .header_wrap .page_list .about img{ width: 38px; }
header .header_wrap .page_list .kyoiku img{ width: 53px; }
header .header_wrap .page_list .annai img{ width: 49px; }
header .header_wrap .page_list .news img{ width: 31px; }
/* テキスト */
header .header_wrap .page_list p{ font-size: 14px; line-height: 1; margin-top: 6px; letter-spacing: .2px;}
/*-------- hum --------*/
.openbtn{margin-right: 31px;cursor: pointer;width: 30px;height:13px;z-index: 9999;display: inline-block;position: absolute; right: 10px; top: 35px;}
/*×に変化*/	
.openbtn span{display: inline-block;transition: all .4s;position: absolute;left: -1px;height: 2px;width: 30px;background: #000;background-blend-mode: difference;}
.openbtn span:nth-of-type(2) { top: 8px;}
.openbtn span:nth-of-type(3) { top: 16px;}
.openbtn.active {height:30px; margin-top: -7px;}
.openbtn.active span{background: #000;z-index: 9999;}
.openbtn.active span:nth-of-type(1) {top: 13px;left: -1px;transform: translateY(6px) rotate(-45deg);}
.openbtn.active span:nth-of-type(2) { display: none;}
.openbtn.active span:nth-of-type(3) {top: 25px;left: -1px;transform: translateY(-6px) rotate(45deg);}
.hum { display: none;}

@media screen and (max-width: 1000px) {
/* ロゴ */
header .header_wrap .h_logo .h_inner{ position: absolute; top: 16%;left: 2.5%;display: flex; align-items: center; }
header .header_wrap .h_logo img{ width: 60px;}
header .header_wrap .h_logo .h_logo_txt {  margin-left: 10px;}
header .header_wrap .h_logo .h_logo_txt h3{ font-size: 12px;}
header .header_wrap .h_logo .h_logo_txt h1{ font-size: 30px; }
/* リスト */
header .header_wrap .page_list a{ margin-right: 40px;}
}/*END*/
@media screen and (max-width: 800px) {
/* リスト */
header .header_wrap .page_list{ display: none;}
.hum { display: block;}
}/*END*/
@media screen and (max-width: 500px) {
header{z-index: 100; width: 100%; height: 70px;}
/* ロゴ */
header .header_wrap .h_logo .h_inner{ position: absolute; top: 16%;left: 2.5%;display: flex; align-items: center; }
header .header_wrap .h_logo img{ width: 50px;}
header .header_wrap .h_logo .h_logo_txt {  margin-left: 10px;}
header .header_wrap .h_logo .h_logo_txt h3{ font-size: 10px;}
header .header_wrap .h_logo .h_logo_txt h1{ font-size: 24px; }
.openbtn{ right: 0px; top: 27px;}
}/*END*/


/*-------------------------------------------------
	nav
--------------------------------------------------*/
#g-nav a{text-decoration: none;}
#g-nav a:hover{ opacity: 1; }
#g-nav{position:fixed;z-index: 999;top:-300%;left:0;width:100%;height: 100vh;/*ナビの高さ*/background-color: #fff; transition: all 0.6s;}
/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{top: 0;}
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive .g_nav_inner{/*ナビの数が増えた場合縦スクロール*/ position: fixed;z-index: 999; width: 100%;height: 100vh;/*表示する高さ*/overflow-y: hidden; -webkit-overflow-scrolling: touch;overflow-x: hidden;}
.g_nav_inner{ width: 100%; height: 100vh;}
.g_nav_inner .inner p, 
.g_nav_inner .inner a{color: #000; font-size: 24px; }
.g_nav_inner .inner ul{ display: block;}
.g_nav_inner .inner li{ margin-top: 30px;}
.g_nav_inner .inner li:nth-child(1){ margin-top: 0px;}
header .link_box_sp { width: 230px; height: 48px; background: #1e3b8d;  border-radius: 15px; display: flex; align-items: center;}
header .link_box_sp:hover { opacity: 0.9;}
header .link_box_sp a{ color: #fff;  display: flex; align-items: center;}
header .link_box_sp a img{ width: 23px; height: 25px; margin-left: 19px;}
header .link_box_sp a p{ margin-left: 15px;font-weight: 400;}
.g_nav_inner .link_box_sp p{color: #fff; font-size: 20px; }
.g_nav_inner .nav_wrap{display: flex; align-items: center; justify-content: center; height: 100vh; position: relative; overflow-y: hidden;}
.g_nav_inner .inner{ width: 100%; max-width: 1600px; z-index: 999;display: flex; align-items: center; justify-content: center;margin: 0 auto;}
/*ここについてなぜ必要か必ずチャック！！！！！！
@media (max-width: 400px) {
#g-nav,
#g-nav.panelactive .g_nav_inner,
.g_nav_inner,
.g_nav_inner .nav_wrap,
#main .inner{ height: -webkit-fill-available; }
}/*END*/ 
/* ロゴ */
#g-nav .nav_top { margin-bottom: 30px;}
#g-nav .nav_top .nav_img_box img{ width: 66px;}
#g-nav .nav_top .nav_logo_txt { text-align: center; margin-left: 16px; margin-top: 10px;}
#g-nav .nav_top .nav_logo_txt h3{ font-size: 13.6px; line-height: 1;}
#g-nav .nav_top .nav_logo_txt h1{ font-size: 30px; line-height: 1.2; letter-spacing: 1px; font-weight: 400;}
/* リスト */

#g-nav li a{ margin-top: 20px; display: flex; align-items: center;}
/* アイコン */
#g-nav .nav_about img{ width: 38px; margin-left: 7px; margin-right: 17px;}
#g-nav .nav_kyoiku img{ width: 53px; margin-right: 10px;}
#g-nav .nav_annai img{ width: 49px; margin-left: 2px; margin-right: 12px;}
#g-nav .nav_news img{ width: 31px; margin-left: 11px; margin-right: 22px;}

#g-nav .nav_about,
#g-nav .nav_kyoiku,
#g-nav .nav_annai,
#g-nav .nav_news { width: 180px;  margin: 50px auto 0;}


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

}/*END*/
/*-------------------------------------------------
	banner
--------------------------------------------------*/
#banner { height: 18.1vw; width: 100%; position: relative; z-index: -10; overflow: hidden;}
#banner .ban_inner .bg_img img{ width: 100%;}
#banner .ban_inner .bg_img{ position: absolute; top: 0px; z-index: -1; width: 100%;}
#banner .ban_inner .title { position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%); }
#banner .ban_inner h1{ font-size: 48px; font-weight: 400;text-align: center; color: #fff;}
@media screen and (max-width: 1600px) {
#banner .ban_inner h1{ font-size: 3vw;}
}/*END*/
@media screen and (max-width: 1000px) {
#banner .ban_inner h1{ font-size: 4vw;}
}/*END*/
@media screen and (max-width: 750px) {
#banner { height: 20vw;}
#banner .ban_inner .bg_img{ scale: 1.2;}
#banner .ban_inner h1{ font-size: 5vw;}
}/*END*/
@media screen and (max-width: 500px) {
#banner { height: 24vw;}
#banner .ban_inner .bg_img{ scale: 1.5;}
#banner .ban_inner h1{ font-size: 6vw;}
}/*END*/

/*-------------------------------------------------
	footer 
--------------------------------------------------*/
footer { position: relative; color: #0e0062; width: 100%; height: 612px; z-index: 10;}
footer .footer_bg  img { width: 100%; z-index: -1; }
footer .footer_bg { position: absolute; top: 0px; z-index: -1; width: 100%;}
footer .footer_box { width: 982px; margin: 0 auto; display: flex; padding-left: 40px;}
footer .footer_box .footer_l { width: 390px; margin-top: 130px;}
footer .footer_box .footer_l .logo_box{ display: flex; align-items: center;}
footer .footer_box .footer_l .logo_box img{ width: 111px;}
footer .footer_box .footer_l .logo_box .txt_box { margin-left: 25px;}
footer .footer_box .footer_l .logo_box .txt_box h3{ font-size: 16px; }
footer .footer_box .footer_l .logo_box .txt_box h2{ font-size: 34.6px; line-height: 1;letter-spacing: 1px;}
footer .footer_box .footer_l .jusyo { font-size: 18px; margin-top: 40px; line-height: 1.2;}
footer .footer_box .footer_l h3 { font-size: 36px; font-weight: 500; line-height: 1.9; letter-spacing: 1px;}
footer .footer_box .footer_l .bosyu { font-size: 16px; line-height: 1.4;}
footer .footer_box .footer_m { width: 1px; height: 340px; margin-top: 122px; margin-left: 80px; border-left: dotted 3px #dddddd;}
footer .footer_box iframe { width: 430px; height: 310px; margin-left: 77px; margin-top: 135px;border-radius: 10px;}
.right { font-size: 12px; text-align: center; margin-top: 70px;}
@media screen and (max-width: 1600px) {
footer .footer_bg  img { width: 1600px;}
footer .footer_bg { position: absolute;left: 50%; transform: translate(-50%, -50%); top: 306px; width: 1600px;}
}
@media screen and (max-width: 1200px) {
footer { height: 550px;}
footer .footer_box { width: 800px; margin: 0 auto; display: flex; padding-left: 40px;}
footer .footer_box .footer_l {  margin-top: 130px;}
footer .footer_box .footer_l .logo_box{ display: flex; align-items: center;}
footer .footer_box .footer_l .logo_box img{ width: 80px;}
footer .footer_box .footer_l .logo_box .txt_box { margin-left: 15px;}
footer .footer_box .footer_l .logo_box .txt_box h3{ font-size: 14px; }
footer .footer_box .footer_l .logo_box .txt_box h2{ font-size: 28px; line-height: 1;letter-spacing: 1px;}
footer .footer_box .footer_l .jusyo { font-size: 16px; margin-top: 40px; line-height: 1.2;}
footer .footer_box .footer_l h3 { font-size: 28px; font-weight: 500; line-height: 1.9; letter-spacing: 1px;}
footer .footer_box .footer_l .bosyu { font-size: 15px; line-height: 1.4;}
footer .footer_box .footer_m { width: 1px; height: 300px; margin-top: 122px; margin-left: 0px; }
footer .footer_box iframe { width: 380px; height: 260px; margin-left: 40px; margin-top: 135px; }
.right { font-size: 12px; text-align: center; margin-top: 50px;}
}
@media screen and (max-width: 1000px) {
footer .footer_box iframe { width: 330px; height: 200px; margin-left: 40px; margin-top: 170px; }
}
@media screen and (max-width: 840px) {
footer { height: 800px;}
footer .footer_box { width: 370px; margin: 0 auto; display: block;}
footer .footer_box .footer_l { width: 370px; margin: 0 auto; padding-top: 80px;}
footer .footer_box .footer_l .logo_box{ display: flex; align-items: center;}
footer .footer_box .footer_l .logo_box img{ width: 90px;}
footer .footer_box .footer_l .logo_box .txt_box { margin-left: 25px;}
footer .footer_box .footer_l .logo_box .txt_box h3{ font-size: 16px; }
footer .footer_box .footer_l .logo_box .txt_box h2{ font-size: 34.6px; line-height: 1;letter-spacing: 1px;}
footer .footer_box .footer_l .jusyo { font-size: 18px; margin-top: 40px; line-height: 1.2;}
footer .footer_box .footer_l h3 { font-size: 36px; font-weight: 500; line-height: 1.9; letter-spacing: 1px;}
footer .footer_box .footer_l .bosyu { font-size: 16px; line-height: 1.4;}
footer .footer_box .footer_m { display: none;}
footer .footer_box .footer_r { display: flex; align-items: center; justify-content: center;}
footer .footer_box iframe { width: 370px; height: 260px; margin: 50px auto 0; }
.right { font-size: 12px; text-align: center; margin-top: 50px;}
}
@media screen and (max-width: 600px) {
footer { height: 770px;}
footer .footer_bg { position: absolute;left: 50%; transform: translate(-50%, -50%); top: 270px; width: 1600px;}
footer .footer_box { width: 370px; margin: 0 auto; display: block; padding-right: 40px;}
footer .footer_box .footer_l { width: 370px; margin: 0 auto; padding-top: 50px;}
footer .footer_box .footer_l .logo_box{ display: flex; align-items: center;}
footer .footer_box .footer_l .logo_box img{ width: 90px;}
footer .footer_box .footer_l .logo_box .txt_box { margin-left: 15px;}
footer .footer_box .footer_l .logo_box .txt_box h3{ font-size: 16px; }
footer .footer_box .footer_l .logo_box .txt_box h2{ font-size: 34.6px; line-height: 1;letter-spacing: 1px;}
footer .footer_box .footer_l .jusyo { font-size: 18px; margin-top: 40px; line-height: 1.2;}
footer .footer_box .footer_l h3 { font-size: 36px; font-weight: 500; line-height: 1.9; letter-spacing: 1px;}
footer .footer_box .footer_l .bosyu { font-size: 16px; line-height: 1.4;}
footer .footer_box .footer_m { display: none;}
footer .footer_box .footer_r { display: flex; align-items: center; justify-content: center;}
footer .footer_box iframe { width: 370px; height: 260px; margin: 50px auto 0; }
.right { font-size: 12px; text-align: center; margin-top: 50px;}
}
@media screen and (max-width: 450px) {
footer { height: 670px;}
footer .footer_box { width: 330px; margin: 0 auto; display: block; padding-right: 40px;}
footer .footer_box .footer_l { width: 330px; margin: 0 auto; padding-top: 50px;}
footer .footer_box .footer_l .logo_box{ display: flex; align-items: center;}
footer .footer_box .footer_l .logo_box img{ width: 70px;}
footer .footer_box .footer_l .logo_box .txt_box { margin-left: 10px;}
footer .footer_box .footer_l .logo_box .txt_box h3{ font-size: 14px; }
footer .footer_box .footer_l .logo_box .txt_box h2{ font-size: 32px;  line-height: .8;letter-spacing: 1px;}
footer .footer_box .footer_l .jusyo { font-size: 16px; margin-top: 40px; line-height: 1.2;}
footer .footer_box .footer_l h3 { font-size: 32px; font-weight: 500; line-height: 1.9; letter-spacing: 1px;}
footer .footer_box .footer_l .bosyu { font-size: 14px; line-height: 1.4;}
footer .footer_box .footer_m { display: none;}
footer .footer_box .footer_r { display: flex; align-items: center; justify-content: center;}
footer .footer_box iframe { width: 330px; height: 210px; margin: 50px auto 0; }
.right { font-size: 11px; text-align: center; margin-top: 50px;}
}
@media screen and (max-width: 400px) {
footer { height: 650px;}
footer .footer_box { width: 290px; margin: 0 auto; display: block; padding-right: 40px;}
footer .footer_box .footer_l { width: 290px; margin: 0 auto; padding-top: 50px;}
footer .footer_box .footer_l .logo_box{ display: flex; align-items: center;}
footer .footer_box .footer_l .logo_box img{ width: 50px;}
footer .footer_box .footer_l .logo_box .txt_box { margin-left: 10px;}
footer .footer_box .footer_l .logo_box .txt_box h3{ font-size: 13px; }
footer .footer_box .footer_l .logo_box .txt_box h2{ font-size: 28px; line-height: .8;letter-spacing: 1px;}
footer .footer_box .footer_l .jusyo { font-size: 16px; margin-top: 40px; line-height: 1.2;}
footer .footer_box .footer_l h3 { font-size: 28px; font-weight: 500; line-height: 1.9; letter-spacing: 1px;}
footer .footer_box .footer_l .bosyu { font-size: 14px; line-height: 1.4;}
footer .footer_box .footer_m { display: none;}
footer .footer_box .footer_r { display: flex; align-items: center; justify-content: center;}
footer .footer_box iframe { width: 290px; height: 180px; margin: 50px auto 0; }
.right { font-size: 10px; text-align: center; margin-top: 50px;}
}
@media screen and (max-width: 370px) {
footer { height: 620px;}
footer .footer_box { width: 78.3vw; margin: 0 auto; display: block; padding-right: 40px;}
footer .footer_box .footer_l { width: 78.3vw; margin: 0 auto; padding-top: 50px;}
footer .footer_box .footer_l .logo_box{ display: flex; align-items: center;}
footer .footer_box .footer_l .logo_box img{ width: 50px;}
footer .footer_box .footer_l .logo_box .txt_box { margin-left: 10px;}
footer .footer_box .footer_l .logo_box .txt_box h3{ font-size: 13px; }
footer .footer_box .footer_l .logo_box .txt_box h2{ font-size: 26px; line-height: .8;letter-spacing: 1px;}
footer .footer_box .footer_l .jusyo { font-size: 14.5px; margin-top: 40px; line-height: 1.2;}
footer .footer_box .footer_l h3 { font-size: 24px; font-weight: 500; line-height: 1.9; letter-spacing: 1px;}
footer .footer_box .footer_l .bosyu { font-size: 14px; line-height: 1.4;}
footer .footer_box .footer_m { display: none;}
footer .footer_box .footer_r { display: flex; align-items: center; justify-content: center;}
footer .footer_box iframe { width: 78.3vw; height: 180px; margin: 50px auto 0; }
.right { font-size: 9px; text-align: center; margin-top: 50px;}
}

footer .footer_color_bg { position: absolute; top: 0px;  width: 100%; height: 400px;background: url(../img/bg.gif) center top; z-index: -3;}

@media screen and (max-width: 600px) {
footer .footer_color_bg {  top: -90px;  height: 400px;}
}


footer { margin-top: 100px;}
footer .footer_bg_sp { display: none; z-index: -2;}
@media screen and (max-width: 1600px) {
footer .footer_bg_sp  img { width: 1600px;}
footer .footer_bg_sp { display: block; position: absolute;left: 50%; transform: translate(-50%, -50%); top: 600px; width: 1600px; z-index: -2;}
}
/*-------------------------------------------------
	education
--------------------------------------------------*/
#news { margin-top: 95px;width: 100%;display: flex; align-items: center; justify-content: center;}
#news .news_inner { display: flex; align-items: start; }
#news .news_box{ width: 795px; margin-right: 57px;}
#news .news_box .news_title { display: flex; align-items: center; }
#news .news_box .news_title .book_img { width: 45px; margin-right: 20px;}
#news .news_box .news_title h2 { font-size: 30px; }
#news .news_box .news_list ul { margin-top: 26px; width: 795px;}
#news .news_box .news_list ul li { border-top: dotted 3px #f1f1f1;}
#news .news_box .news_list ul li:nth-last-child(1) { border-bottom: dotted 3px #f1f1f1;}
#news .news_box .news_list ul li a{ display: flex; align-items: center; padding: 22px 5px;}
#news .news_box .news_list ul li a .date{ font-size: 14px; color: #f39c9c; margin-right: 40px; font-weight: 500;}
#news .news_box .news_list ul li a .title{ font-size: 16px; color: #0e0062; font-weight: 500;}
/* アーカイブ */
#news .archive { width: 250px; border-radius: 20px; background: #f7f7f7;display: flex; align-items: center; justify-content: center;}
#news .archive .archive_inner { width: 208px;  margin: 0 auto;}
#news .archive .archive_inner .archive_title { display: flex; align-items: center; margin: 35px auto 0;}
#news .archive .archive_inner .archive_title .archive_img { width: 56px;}
#news .archive .archive_inner .archive_title h3 { font-size: 24px;}
#news .archive .archive_inner ul{ width: 208px;  height: 100%;margin: 0 auto; padding: 31px 0 50px;}
#news .archive .archive_inner ul li{ width: 208px;  margin: 0 auto; border-top: dotted 3px #a5a4d1;}
#news .archive .archive_inner ul  li:nth-last-child(1) { border-bottom: dotted 3px #a5a4d1;}
#news .archive .archive_inner ul li .arc_date{ padding: 11px 19px; }
#news .archive .archive_inner ul li a{ padding: 10px 5px; display: inline-block;}
@media screen and (max-width: 1200px) {
#news .news_box{ width: 66.2vw; margin-right: 4.7vw;}
#news .news_box .news_list ul { width: 66.2vw;}
/* アーカイブ */
#news .archive { width: 220px;}
#news .archive .archive_inner { width: 190px;}
#news .archive .archive_inner ul{ width: 190px;}
#news .archive .archive_inner ul li{ width: 190px;}
}
@media screen and (max-width: 1024px) {
#news .news_inner { display: block; align-items: start; }
#news .news_box{ width: 70vw; margin-right: 0; margin: 0 auto;}
#news .news_box .news_list ul { width: 70vw;}
/* アーカイブ */
#news .archive { width: 70vw; margin-top: 50px;}
#news .archive .archive_inner { width: 60vw;}
#news .archive .archive_inner ul{ width: 60vw;}
#news .archive .archive_inner ul li{ width: 60vw;}
}
@media screen and (max-width: 640px) {
#news .news_box .news_list ul li a{ display: block; }
#news .news_box .news_title h2 { font-size: 24px; }
#news .news_box .news_title h2 span{ display: inline-block;}
}
@media screen and (max-width: 500px) {
#news { margin-top: 70px;}
}
@media screen and (max-width: 400px) {
#news { margin-top: 50px;}
#news .news_box .news_title h2 { font-size: 22px; }
}
footer { margin-top: 100px;}
footer .footer_bg_sp { display: none; z-index: -2;}
@media screen and (max-width: 1600px) {
footer .footer_bg_sp  img { width: 1600px;}
footer .footer_bg_sp { display: block; position: absolute;left: 50%; transform: translate(-50%, -50%); top: 600px; width: 1600px; z-index: -2;}
}

/*-------------------------------------------------
	記事
--------------------------------------------------*/
/* 記事 */
#article { margin-top: 95px;width: 100%;display: flex; align-items: center; justify-content: center;}
#article .article_box { display: flex; align-items: start; }
#article .article_box .article_inner { width: 800px; margin-right: 57px; font-weight: 400; }
#article .article_box .article_inner .news_title { display: flex; align-items: center;}
#article .article_box .news_title .book_img { width: 45px !important; margin-right: 20px;}
#article .article_box .news_title h2 { font-size: 30px; }
#article .article_box .article_inner .dot_line {width: 800px; margin-top: 12px; margin-bottom: 19px; border-top: dotted 3px #ededed;}
#article .article_box .article_inner .date { font-size: 14px;}
#article .article_box .article_inner h2 { font-size: 24px; margin-top: 25px;}
#article .article_box .article_inner p {  margin-top: 30px;}
#article .article_box .article_inner img { margin-top: 30px;  display: inline-block; max-width: 80%; }
#article .article_box .article_inner .bottom_dot_line { width: 800px;margin-top: 55px; border-top: dotted 3px #ededed;}
@media screen and (max-width: 1200px) {
#article .article_box .article_inner { width: 66.6vw; margin-right: 4.7vw;}
#article .article_box .article_inner .dot_line { width: 66.6vw;}
#article .article_box .article_inner .bottom_dot_line { width: 66.6vw;}
}
@media screen and (max-width: 1024px) {
#article .article_box { display: block; align-items: start; }
#article .article_box .article_inner{ width: 70vw; margin-right: 0; margin: 0 auto;}
}
@media screen and (max-width: 640px) {
#article .article_inner .news_title h2 { font-size: 24px; }
}
@media screen and (max-width: 500px) {
#article { margin-top: 70px;}
}
@media screen and (max-width: 400px) {
#article { margin-top: 50px;}
#article .article_inner .news_title h2 { font-size: 22px; }
}



/* アーカイブ */
#article .archive { width: 250px; border-radius: 20px; background: #f7f7f7;display: flex; align-items: start; justify-content: center;}
#article .archive .archive_inner { width: 208px;  margin: 0 auto;}
#article .archive .archive_inner .archive_title { display: flex; align-items: center; margin: 35px auto 0;}
#article .archive .archive_inner .archive_title .archive_img { width: 56px;}
#article .archive .archive_inner .archive_title h3 { font-size: 24px;}
#article .archive .archive_inner .news_list_archive ul{ width: 208px;  height: 100%;margin: 0 auto; padding: 31px 0 50px;}
#article .archive .archive_inner .news_list_archive  ul li{ width: 208px; margin: 0 auto; border-top: dotted 3px #a5a4d1;}
#article .archive .archive_inner .news_list_archive  ul li:nth-last-child(1) { border-bottom: dotted 3px #a5a4d1;}
#article .archive .archive_inner .news_list_archive  ul li .arc_date{ padding: 11px 19px; }
#article .archive .archive_inner .news_list_archive  ul li a{ padding: 10px 5px; display: inline-block;}
@media screen and (max-width: 1200px) {
#article .news_box .news_list ul { width: 66.2vw;}
/* アーカイブ */
#article .archive { width: 20.8vw;}
#article .archive .archive_inner { width: 17.3vw;}
#article .archive .archive_inner .news_list_archive ul{ width: 17.3vw;}
#article .archive .archive_inner .news_list_archive ul li{ width: 17.3vw;}
}
@media screen and (max-width: 1024px) {
/* アーカイブ */
#article .archive { width: 70vw; margin-top: 50px;}
#article .archive .archive_inner { width: 60vw;}
#article .archive .archive_inner .news_list_archive ul { width: 60vw;}
#article .archive .archive_inner .news_list_archive ul li{ width: 60vw;}
}
@media screen and (max-width: 500px) {
#article { margin-top: 70px;}
}
@media screen and (max-width: 400px) {
#article { margin-top: 50px;}
}


/*-------------------------------------------------
	information
--------------------------------------------------*/
#information { width: 100%; margin: 0 auto 100px;position: relative; display: flex; align-items: center; justify-content: center;}
#information .info_inner { width: 1250px; margin: 80px auto 0; position: relative;}
#information .info_inner .title{  margin: auto; text-align: center; }
#information .info_inner .title img{  width: 86px;}
#information .info_inner .txt_box {  margin-top: 45px; display: flex; align-items: center; justify-content: center;}
#information .info_inner .txt_box img{ width: 13px; height: 25px; margin-top: 5px;}
#information .info_inner .title h2{ font-size: 30px;margin-top: 30px;}
#information .info_inner .pre_box { margin-top: 55px;display: flex; align-items: center; justify-content: center; text-align: center;}
#information .info_inner .pre_box p{ font-size: 18px; line-height: 2;}
/* タイトルテキスト */
#information .info_inner .info_txt { text-align: center;margin-top: 80px;}
#information .info_inner .info_txt .recruitment { text-align: center;display: flex; align-items: center; justify-content: center;}
#information .info_inner .info_txt .recruitment .recruitment_inner {  display: flex; align-items: center; text-align: center; margin: 0 auto;height: 40px;}
#information .info_inner .info_txt .recruitment .recruitment_inner h3{ font-size: 24px; line-height: 1.5; margin: 0 15px; padding: 0 8px;background: linear-gradient(transparent 50%,#b2edf8 0%);}
#information .info_inner .info_txt .recruitment .recruitment_inner .recruit_img{ margin-top: 10px;width: 13px; height: 25px; line-height: 1; display: flex; align-items: center;}
#information .info_inner .info_txt p{ margin-top: 30px;}
@media screen and (max-width: 960px) {
#information .info_inner { margin: 60px auto 0;}
/* タイトルテキスト */
#information .info_inner .info_txt { text-align: center;margin: 40px auto 0; width: 700px;}
#information .info_inner .info_txt .recruitment { text-align: center;display: flex; align-items: center; justify-content: center;}
#information .info_inner .info_txt .recruitment .recruitment_inner {  display: flex; align-items: center; text-align: center; margin: 0 auto;}
#information .info_inner .info_txt .recruitment .recruitment_inner h3{ font-size: 24px; line-height: 1.5; margin: 0 15px; padding: 0 8px;background: linear-gradient(transparent 50%,#b2edf8 0%); display: inline-block;}
#information .info_inner .info_txt .recruitment .recruitment_inner .recruit_img{ width: 13px; height: 25px;}
#information .info_inner .info_txt p{ margin-top: 30px; line-height: 2;}
#information .info_inner .info_txt p span { display: block;}
#information .info_inner .info_txt p br { display: none;}
}
@media screen and (max-width: 960px) {
#information .info_inner { margin: 50px auto 0;}
}
@media screen and (max-width: 500px) {
#information .info_inner .title img{  width: 65px;}
#information .info_inner .title h2{ font-size: 26px;margin-top: 20px;}
/* タイトルテキスト */
#information .info_inner .info_txt { text-align: center;margin: 40px auto 0; width: 700px;}
#information .info_inner .info_txt .recruitment { text-align: center;display: flex; align-items: center; justify-content: center;}
#information .info_inner .info_txt .recruitment .recruitment_inner {  display: flex; align-items: center; text-align: center; margin: 0 auto;}
#information .info_inner .info_txt .recruitment .recruitment_inner h3{ font-size: 22px; line-height: 1.5; margin: 0 10px; padding: 0 8px;background: linear-gradient(transparent 50%,#b2edf8 0%); display: inline-block;}
#information .info_inner .info_txt .recruitment .recruitment_inner .recruit_img{ width: 9px; height: 17px;}
#information .info_inner .info_txt p{ font-size: 16px;}
#information .info_inner .info_txt p .sp500 { display: block;}
#information .info_inner .info_txt p br { display: none;}
}
@media screen and (max-width: 420px) {
#information .info_inner { margin: 35px auto 0;}
#information .info_inner .info_txt p .sp420 { display: block;}
}
@media screen and (max-width: 370px) {
#information .info_inner .title h2{ font-size: 26px;margin-top: 18px;}
/* タイトルテキスト */
#information .info_inner .info_txt { text-align: center;margin: 50px auto 0; width: 700px;}
#information .info_inner .info_txt .recruitment { text-align: center;display: flex; align-items: center; justify-content: center;}
#information .info_inner .info_txt .recruitment .recruitment_inner {  display: flex; align-items: center; text-align: center; margin: 0 auto;}
#information .info_inner .info_txt .recruitment .recruitment_inner h3{ font-size: 18px; line-height: 1.5; margin: 0 4px; padding: 0 8px;background: linear-gradient(transparent 50%,#b2edf8 0%); display: inline-block;}
#information .info_inner .info_txt .recruitment .recruitment_inner .recruit_img{ width: 9px; height: 17px;}
#information .info_inner .info_txt p{ font-size: 15px;}
}

/*-------------------------------------------------
	交差
--------------------------------------------------*/
#information .info_inner .info_box { width: 1070px; margin: 74px auto 0;}
#information .info_inner .info_box li{ width: 1070px; margin: 0 auto ;}
#information .info_inner .info_box li .dot_bar { border-top: dotted 3px #d1bf98;}
#information .info_inner .info_box li .li_inner { margin-top: 70px;display: flex; align-items: center;}
/* 画像 */
#information .info_inner .info_box li .li_inner .info_img_box { margin-right: 48px; margin-left: 92px;}
#information .info_inner .info_box li .li_inner .info_img_box img { box-shadow: 1px 1px 8px ;}
/* テキスト */
#information .info_inner .info_box li .li_inner .info_txt_box { width: 541px;}
#information .info_inner .info_box li .li_inner .info_txt_box h3{ font-size: 30px; line-height: 1.1;  background: linear-gradient(transparent 50%,#f8e2b2 0%); display: inline-block;}
#information .info_inner .info_box li .li_inner .info_txt_box h4{ font-size: 22px; line-height: 2; margin-top: 30px;}
#information .info_inner .info_box li .li_inner .info_txt_box p{ font-size: 16px; line-height: 2;}
/* only */
#information .info_inner .info_box li.only .li_inner { flex-direction: row-reverse;}
#information .info_inner .info_box li.body .li_inner { flex-direction: row-reverse;}
/* personal */
#information .info_inner .info_box  li.personal { margin-top: 65px;}
#information .info_inner .info_box li.personal .li_inner .info_img_box { margin-right: 92px; margin-left: 48px;}
#information .info_inner .info_box li.personal .li_inner .info_title_box { width: 300px;}
/* body */
#information .info_inner .info_box  li.body { margin-top: 65px;}
#information .info_inner .info_box li.body .li_inner .info_title_box { width: 350px; }
#information .info_inner .info_box li.body .li_inner .info_img_box { width: 424px; height: 409px;margin-right: 48px; margin-left: 92px; position: relative;}
#information .info_inner .info_box li.body .li_inner .info_img_box .bodyimg_01{ z-index: 1; }
#information .info_inner .info_box li.body .li_inner .info_img_box .bodyimg_02{ z-index: -1; position: absolute; top: 193px; left: 159px;}
/* 点線 */
.bottom_dot_bar { margin-top: 70px;border-top: dotted 3px #d1bf98;}

.itb_pc { display: block;}
.itb_sp { display: none;}
@media screen and (max-width: 1200px) {
/* 交差 */
#information .info_inner .info_box { width: 89.1vw; }
#information .info_inner .info_box li{ width: 89.1vw; }
/* 画像 */
#information .info_inner .info_box li .li_inner .info_img_box { margin-right: 4vw; margin-left: 7.6vw;}
/* テキスト */
#information .info_inner .info_box li .li_inner .info_txt_box { width: 45vw;}
/* personal */
#information .info_inner .info_box li.personal .li_inner .info_img_box { margin-right: 7.6vw; margin-left: 4vw;}
/* body */
#information .info_inner .info_box li.body .li_inner .info_img_box { width: 35.3vw; height: 34vw;margin-right: 4vw; margin-left: 7.6vw; position: relative;}
#information .info_inner .info_box li.body .li_inner .info_img_box .bodyimg_01{ z-index: 1; }
#information .info_inner .info_box li.body .li_inner .info_img_box .bodyimg_02{ z-index: -1; position: absolute; top: 16vw; left: 13.2vw;}
}
@media screen and (max-width: 1100px) {
/* テキスト */
#information .info_inner .info_box li .li_inner .info_txt_box { width: 541px;}
#information .info_inner .info_box li .li_inner .info_txt_box h3{ font-size: 26px; line-height: 1.1;  background: linear-gradient(transparent 50%,#f8e2b2 0%); display: inline-block;}
#information .info_inner .info_box li .li_inner .info_txt_box h4{ font-size: 21px; line-height: 2; margin-top: 30px;}
#information .info_inner .info_box li .li_inner .info_txt_box p{ font-size: 16px; line-height: 2;}
/* body */
#information .info_inner .info_box  li.body { margin-top: 65px;}
#information .info_inner .info_box li.body .li_inner .info_title_box { width: 350px; }
#information .info_inner .info_box li.body .li_inner .info_img_box { width: 350px; height: 370px;margin-right: 48px; margin-left: 92px; position: relative;}
#information .info_inner .info_box li.body .li_inner .info_img_box .bodyimg_01{ z-index: 1; width: 80%;}
#information .info_inner .info_box li.body .li_inner .info_img_box .bodyimg_02{ z-index: -1; width: 80%;position: absolute; top: 175px; left: 50px;}
}
@media screen and (max-width: 910px) {
#information .li_box { display: flex; align-items: center; justify-content: center;}
/* 交差 */
#information .info_inner .info_box { width: 700px; margin: 74px auto 0;}
#information .info_inner .info_box li{ width: 700px; margin: 0 auto ;}
#information .info_inner .info_box li .dot_bar { border-top: dotted 3px #d1bf98;}
#information .info_inner .info_box li .li_inner { margin-top: 70px;display: block; align-items: center;}
/* 画像 */
#information .info_inner .info_box li .li_inner .info_img_box {  margin: 0 auto; width: 80%;}
#information .info_inner .info_box li .li_inner .info_img_box img { box-shadow: 1px 1px 8px ;margin: 0 auto;}
/* テキスト */
#information .info_inner .info_box li .li_inner .info_txt_box { width: 540px; margin: 30px auto 0;}
#information .info_inner .info_box li .li_inner .info_txt_box h3{ font-size: 30px; line-height: 1.1;  background: linear-gradient(transparent 50%,#f8e2b2 0%); display: inline-block;}
#information .info_inner .info_box li .li_inner .info_txt_box h4{ font-size: 22px; line-height: 2; margin-top: 30px;}
#information .info_inner .info_box li .li_inner .info_txt_box p{ font-size: 16px; line-height: 2;}
/* only */
#information .info_inner .info_box li.only .li_inner { flex-direction: row-reverse;}
#information .info_inner .info_box li.body .li_inner { flex-direction: row-reverse;}
/* personal */
#information .info_inner .info_box  li.personal { margin-top: 65px;}
#information .info_inner .info_box li.personal .li_inner .info_img_box { margin-right: 92px; margin-left: 48px;}
#information .info_inner .info_box li.personal .li_inner .info_title_box { width: 300px;}
/* body */
#information .info_inner .info_box  li.body .info_txt_box { margin-top: 80px;}
#information .info_inner .info_box  li.body { margin-top: 65px;}
#information .info_inner .info_box li.body .li_inner .info_title_box { width: 350px; }
#information .info_inner .info_box li.body .li_inner .info_img_box { width: 350px; height: 370px;margin-right: 48px; margin-left: 92px; position: relative;}
#information .info_inner .info_box li.body .li_inner .info_img_box .bodyimg_01{ z-index: 1; }
#information .info_inner .info_box li.body .li_inner .info_img_box .bodyimg_02{ z-index: -1; position: absolute; top: 193px; left: 159px;}
}
@media screen and (max-width: 780px) {
#information .li_box { display: flex; align-items: center; justify-content: center;}
/* 交差 */
#information .info_inner .info_box { width: 500px; margin: 74px auto 0;}
#information .info_inner .info_box li{ width: 500px; margin: 0 auto ;}
#information .info_inner .info_box li .dot_bar { border-top: dotted 3px #d1bf98;}
#information .info_inner .info_box li .li_inner { margin-top: 70px;display: block; align-items: center;}
/* 画像 */
#information .info_inner .info_box li .li_inner .info_img_box {  margin: 0 auto; width: 80%;}
#information .info_inner .info_box li .li_inner .info_img_box img { box-shadow: 1px 1px 8px ;margin: 0 auto;}
/* テキスト */
#information .info_inner .info_box li .li_inner .info_txt_box { width: 420px; margin: 30px auto 0;}
#information .info_inner .info_box li .li_inner .info_txt_box h3{ font-size: 26px; line-height: 1.1;  background: linear-gradient(transparent 50%,#f8e2b2 0%); display: inline-block;}
#information .info_inner .info_box li .li_inner .info_txt_box h4{ font-size: 22px; line-height: 2; margin-top: 30px;}
#information .info_inner .info_box li .li_inner .info_txt_box p{ font-size: 16px; line-height: 2;}
/* only */
#information .info_inner .info_box li.only .li_inner { flex-direction: row-reverse;}
#information .info_inner .info_box li.body .li_inner { flex-direction: row-reverse;}
/* personal */
#information .info_inner .info_box  li.personal { margin-top: 65px;}
#information .info_inner .info_box li.personal .li_inner .info_img_box { margin-right: 0px; margin-left: 0;}
#information .info_inner .info_box li.personal .li_inner .info_title_box { width: 300px;}
/* body */
#information .info_inner .info_box  li.body .info_txt_box { margin-top: 70px;}
#information .info_inner .info_box li.body .li_inner .info_img_box { width: 350px; height: 370px;margin-right: 48px; margin-left: 92px; position: relative;}
#information .info_inner .info_box li.body .li_inner .info_img_box .bodyimg_01{ z-index: 1; width: 80%;position: absolute; top: 0px; left: -50px;}
#information .info_inner .info_box li.body .li_inner .info_img_box .bodyimg_02{ z-index: -1; width: 80%;position: absolute; top: 175px; left: 50px;}
}
@media screen and (max-width: 560px) {
#information .li_box { display: flex; align-items: center; justify-content: center;}
/* 交差 */
#information .info_inner .info_box { width: 89.2vw; margin: 74px auto 0;}
#information .info_inner .info_box li{ width: 89.2vw; margin: 0 auto ;}
#information .info_inner .info_box li .dot_bar { border-top: dotted 3px #d1bf98;}
#information .info_inner .info_box li .li_inner { margin-top: 70px;display: block; align-items: center;}
/* 画像 */
#information .info_inner .info_box li .li_inner .info_img_box {  margin: 0 auto; width: 80%;}
#information .info_inner .info_box li .li_inner .info_img_box img { box-shadow: 1px 1px 8px ;margin: 0 auto;}
/* テキスト */
#information .info_inner .info_box li .li_inner .info_txt_box { width: 75vw; margin: 30px auto 0;}
#information .info_inner .info_box li .li_inner .info_txt_box h3{ font-size: 24px; line-height: 1.1;  background: linear-gradient(transparent 50%,#f8e2b2 0%); display: inline-block;}
#information .info_inner .info_box li .li_inner .info_txt_box h4{ font-size: 20px; line-height: 2; margin-top: 30px;}
#information .info_inner .info_box li .li_inner .info_txt_box p{ font-size: 16px; line-height: 2;}
/* only */
#information .info_inner .info_box li.only .li_inner { flex-direction: row-reverse;}
#information .info_inner .info_box li.body .li_inner { flex-direction: row-reverse;}
/* personal */
#information .info_inner .info_box  li.personal { margin-top: 65px;}
#information .info_inner .info_box li.personal .li_inner .info_img_box { margin: 0 auto;}
#information .info_inner .info_box li.personal .li_inner .info_title_box { width: 300px;}
/* body */
/* body */
#information .info_inner .info_box  li.body .info_txt_box { margin-top: 30px;}
#information .info_inner .info_box li.body .li_inner .info_img_box { width: 350px; height: 370px;margin-right: 48px; margin-left: 92px; position: relative;}
#information .info_inner .info_box li.body .li_inner .info_img_box .bodyimg_01{ z-index: 1; width: 70%;position: absolute; top: 0px; left: 0px;}
#information .info_inner .info_box li.body .li_inner .info_img_box .bodyimg_02{ z-index: -1; width: 70%;position: absolute; top: 150px; left: 60px;}
.itb_pc { display: none;}
.itb_sp { display: block;}
.info_title_box div { display: block;}
}
@media screen and (max-width: 350px) {
#information .info_inner .info_box  li.body .info_txt_box { margin-top: 0px;}
#information .info_inner .info_box li.body .li_inner .info_img_box { width: 350px; height: 370px;margin-right: 48px; margin-left: 92px; position: relative;}
#information .info_inner .info_box li.body .li_inner .info_img_box .bodyimg_01{ z-index: 1; width: 60%;position: absolute; top: 0px; left: 20px;}
#information .info_inner .info_box li.body .li_inner .info_img_box .bodyimg_02{ z-index: -1; width: 60%;position: absolute; top: 150px; left: 60px;}
.itb_pc { display: none;}
.itb_sp { display: block;}
.info_title_box div { display: block;}
}

/*-------------------------------------------------
	color_area
--------------------------------------------------*/
#color_area { padding-bottom: 200px ;background: url(https://www.sapporo-saniku.com/asset/img/bg.gif) center top; margin-top: 0px;  font-weight: 500; position: relative; width: 100%;display: flex; align-items: center; justify-content: center;}
/* 背景 */
#color_area .saniku_syo_bg img { width: 100%; }
#color_area .saniku_syo_bg { position: absolute; top: 0px; z-index: 2; width: 100%;}
@media screen and (max-width: 1600px) {
/* 背景 */
#color_area .saniku_syo_bg img { width: 1600px;}
#color_area .saniku_syo_bg { position: absolute;left: 50%; transform: translate(-50%, -50%); top: 100px; width: 1600px;height: 200px;}
}

/*-------------------------------------------------
	color_area
--------------------------------------------------*/
/* タイトル */
#color_area .color_inner .title_box { margin-top: 70px;display: flex; align-items: center; justify-content: center;height: 110px; }
#color_area .color_inner .title_box .tit_inner { width: 470px; display: flex; align-items: center; margin: 0 auto;}
#color_area .color_inner .title_box .tit_inner .color_girl{ width: 94px; margin-right: 50px;}
#color_area .color_inner .title_box .tit_inner .color_boy{ width: 89px; margin-left: 50px;}
#color_area .color_inner .title_box .tit_inner .sur_l,
#color_area .color_inner .title_box .tit_inner .sur_r{ width: 13px; height: 25px; margin-top: 10px;}
#color_area .color_inner .title_box .tit_inner .title_txt {justify-content: center; text-align: center; margin: 0 16px;}
#color_area .color_inner .title_box .tit_inner .title_txt h2{ font-size: 30px; line-height: 1.4;padding: 0 4px; background: linear-gradient(transparent 60%,#fff 0%);text-align: center; display: inline-block; margin: 0 auto;}
/* 詳細 */
.guidance { margin-top: 70px;display: flex; align-items: center; justify-content: center;}
.guidance .gui_box { width: 1050px; margin: 0 auto; background: #fff; border-radius: 20px;}
.guidance .gui_box .gui_inner{ width: 890px; margin: 80px auto; }
/* テキスト */
.guidance .gui_box ul li h3{ font-size: 24px; line-height: 1.4;font-weight: 400; margin-bottom: 30px;}
.guidance .gui_box ul li .date{ font-size: 20px; font-weight: 500;}
.guidance .gui_box ul li p{ font-size: 18px; line-height: 1.8; font-weight: 400;}
/* 点線 */
.dot_bar_gui { border-bottom: dotted 3px #e5dab9; margin: 42px 0;}

@media screen and (max-width: 1150px) {
/* 詳細 */
.guidance { margin-top: 70px;}
.guidance .gui_box { width: 91.3vw;}
.guidance .gui_box .gui_inner{ width: 77.3vw; margin: 80px auto; }
}
@media screen and (max-width: 800px) {
/* 詳細 */
.guidance { margin-top: 70px;}
.guidance .gui_box { width: 91.3vw;}
.guidance .gui_box .gui_inner{ width: 73vw; margin: 80px auto; }
/* テキスト */
.guidance .gui_box ul li h3{ font-size: 24px; line-height: 1.4;font-weight: 400; margin-bottom: 30px;}
.guidance .gui_box ul li .date{ font-size: 20px; font-weight: 500;}
.guidance .gui_box ul li p{ font-size: 16px; line-height: 1.8; font-weight: 400;}
}
@media screen and (max-width: 560px) {
/* タイトル */
#color_area .color_inner .title_box { margin-top: 70px;display: flex; align-items: center; justify-content: center;}
#color_area .color_inner .title_box .tit_inner { width: 340px; display: flex; align-items: center; margin: 0 auto;}
#color_area .color_inner .title_box .tit_inner .color_girl{ width: 65px; margin-right: 25px;}
#color_area .color_inner .title_box .tit_inner .color_boy{ width: 65px; margin-left: 25px;}
#color_area .color_inner .title_box .tit_inner .sur_l,
#color_area .color_inner .title_box .tit_inner .sur_r{ width: 8px; height: 17px; margin-top: 10px;}
#color_area .color_inner .title_box .tit_inner .title_txt {justify-content: center; text-align: center; margin: 0 16px;}
#color_area .color_inner .title_box .tit_inner .title_txt h2{ font-size: 26px;}
}

@media screen and (max-width: 370px) {
/* タイトル */
#color_area .color_inner .title_box { margin-top: 70px;display: flex; align-items: center; justify-content: center;}
#color_area .color_inner .title_box .tit_inner { width: 300px; display: flex; align-items: center; margin: 0 auto;}
#color_area .color_inner .title_box .tit_inner .color_girl{ width: 55px; margin-right: 18px;}
#color_area .color_inner .title_box .tit_inner .color_boy{ width: 55px; margin-left: 18px;}
#color_area .color_inner .title_box .tit_inner .sur_l,
#color_area .color_inner .title_box .tit_inner .sur_r{ width: 8px; height: 17px; margin-top: 5px;}
#color_area .color_inner .title_box .tit_inner .title_txt {justify-content: center; text-align: center; margin: 0 16px;}
#color_area .color_inner .title_box .tit_inner .title_txt h2{ font-size: 24px;}
}

/*-------------------------------------------------
	費用 
--------------------------------------------------*/
#cost { width: 870px; margin: 0 auto;}
#cost .table_box ul { display: flex; align-items: center; }
#cost .table_box ul li { margin: 5px 2.5px; text-align: center;}
#cost .table_box ul li p{ font-size: 18px;}
/* 幅 */
#cost .cost_txt { margin: 15px auto 15px; font-size: 22px; line-height: 1; font-weight: 500;display: flex; align-items: center; }
#cost .cost_txt .midasi_bar { width: 5px; height: 24px; margin-right:  5px; background: #fecf6c; display: inline-block; }
#cost .table_box { margin-top: 45px;}
/* タイトル */
#cost .hiyo_tit{ width: 170px; height: 50px; border-radius: 20px; background-color: #f8e3b5; display: flex; align-items: center; justify-content: center;}
/* お金 */
#cost .hiyo_mon{ width: 200px; height: 50px; border-radius: 20px; background-color: #ffecc7; display: flex; align-items: center; justify-content: center;}
/* 注意 */
#cost .note_cost { margin-top: 10px;}
#cost .note { width: 870px;margin-top: 45px; font-size: 18px; line-height: 1.3;}

/*-------------------------------------------------
	預かり保育 
--------------------------------------------------*/
/* タイトル */
#cost .azukari .hiyo_tit{ width: 180px; height: 70px; display: flex; align-items: center; justify-content: center;}
#cost .azukari .hiyo_tit p{ line-height: 1; }
/* お金 */
#cost .azukari .hiyo_mon{width: 200px;height: 70px; }
/* テキスト */
#cost .azukari .hiyo_txt{ width: 480px; height: 150px; border-radius: 20px; text-align: left; background-color: #ffecc7;display: flex; align-items: center; justify-content: left;}
#cost .table_box .azukari .hiyo_txt p{ padding-left: 25px;line-height: 1;}
#cost .azukari .hiyo_txt02 { width: 480px; height: 70px; border-radius: 20px; text-align: left; background-color: #ffecc7;display: flex; align-items: center; justify-content: left;}
#cost .azukari .hiyo_txt02  p{ padding-left: 25px;line-height: 1;}
/* 2列用 */
#cost .set_top { margin-top: 10px;}

@media screen and (max-width: 1150px) {
.table_box ul { display: flex; align-items: center; flex-wrap: wrap;}
#cost .table_box .azu_top { margin-top: 0px;}
#cost .note { width: 75.6vw;}
#cost .note_cost { width: 75.6vw;}
#cost .azukari .hiyo_txt { width: 75.6vw; height: 60px;background: none; margin-top: 0px; margin-left: -14px;display: block;}
#cost .azukari .hiyo_txt p{ padding-left: 0px; font-size: 16px ;}
#cost .azukari .hiyo_txt02 { width: 75.6vw; height: 50px;background: none; margin-top: 0px; display: block;}
#cost .azukari .hiyo_txt02  p{ padding-left: 10px; font-size: 16px;}
#cost .note { font-size: 16px;}
#cost .note_cost { font-size: 16px;}
}
@media screen and (max-width: 660px) {
#cost { width: 870px; margin: 0 auto;}
/* タイトル */
#cost .hiyo_tit{ width: 140px; height: 50px;}
/* お金 */
#cost .hiyo_mon{ width: 160px; height: 50px;}
#cost .note { width: 75.6vw;}
#cost .note_cost { width: 75.6vw;}
.azukari { width: 100vw;}
#cost .azukari .hiyo_tit{ width: 150px; height: 70px;}
#cost .azukari .hiyo_tit p{ line-height: 1; }
/* お金 */
#cost .azukari .hiyo_mon{width: 180px;height: 70px; }
#cost .table_box ul li p{ font-size: 16px;}
#cost .cost_txt { font-size: 20px;}
}
@media screen and (max-width: 460px) {
#cost { width: 870px; margin: 0 auto;}
/* タイトル */
#cost .hiyo_tit{ width: 32.5vw; height: 50px;}
/* お金 */
#cost .hiyo_mon{ width: 37.2vw; height: 50px;}
#cost .note { width: 75.6vw;}
#cost .note_cost { width: 75.6vw;}
.azukari { width: 100vw;}
#cost .azukari .hiyo_tit{ width: 34.8vw; height: 70px;}
#cost .azukari .hiyo_tit p{ line-height: 1; }
/* お金 */
#cost .azukari .hiyo_mon{width: 34vw;height: 70px; }
#cost .table_box ul li p{ font-size: 15px;}
#cost .azukari .hiyo_txt02 br{ display: none;}
#cost .azukari .hiyo_txt02 p{ font-size: 14px;}
#cost .azukari .hiyo_txt p{ font-size: 14px;}
#cost .note { font-size: 14px;}
#cost .note_cost { font-size: 14px;}
}

/*-------------------------------------------------
	卒業生
--------------------------------------------------*/
.graduation { width: 1050px; margin: 65px auto 0; border-radius: 20px; background: #fff;}
.graduation .inner { width: 960px; height: 100%; padding: 40px 0; margin: 0 auto;}
.graduation .inner .title_gra { text-align: center;}
.graduation .inner .title_gra h3 { font-size: 24px; line-height: 1.4;padding: 0 6px; background: linear-gradient(transparent 60%,#f8e2b2 0%);text-align: center; display: inline-block; margin: 0 auto;}
.graduation .inner ul { display: flex; align-items: start; margin: 33px auto 0;}
.graduation .inner ul li { width: 449px; min-height: 300px;}
.graduation .inner ul li:nth-child(2) { width: 1px; margin: 0 30px;}
.graduation .inner ul  .dot_gra_line{width: 1px; height: 300px; border-left: dotted 3px #e5dab9; }
.graduation .inner ul li .name { font-size: 20px; margin-top: 16px; margin-bottom: 12px;}
.graduation .inner ul li p { font-size: 16px; line-height: 1.9;}
@media screen and (max-width: 1150px) {
.graduation { width: 91.3vw;}
.graduation .inner { width: 83.4vw;}
.graduation .inner .title_gra h3 { font-size: 24px; line-height: 1.4;padding: 0 6px; background: linear-gradient(transparent 60%,#f8e2b2 0%);text-align: center; display: inline-block; margin: 0 auto;}
.graduation .inner ul li { width: 39vw; min-height: 300px;}
.graduation .inner ul li:nth-child(2) { width: 1px; margin: 0 30px;}
.graduation .inner ul  .dot_gra_line{width: 1px; height: 300px; border-left: dotted 3px #e5dab9; }
.graduation .inner ul li .name { font-size: 20px; margin-top: 16px; margin-bottom: 12px;}
.graduation .inner ul li p { font-size: 16px; line-height: 1.9;}
}
@media screen and (max-width: 993px) {
.graduation .inner ul  .dot_gra_line{width: 1px; height: 360px; border-left: dotted 3px #e5dab9; }
}
@media screen and (max-width: 803px) {
.graduation .inner ul  .dot_gra_line{width: 1px; height: 400px; border-left: dotted 3px #e5dab9; }
}
@media screen and (max-width: 770px) {
.graduation { width: 91.3vw;}
.graduation .inner { width: 75vw;}
.graduation .inner .title_gra h3 { font-size: 24px;}
.graduation .inner ul { display: block; align-items: start; margin: 33px auto 0;}
.graduation .inner ul li { width: 75vw; min-height: 0px; margin: 0 auto;}
.graduation .inner ul li:nth-child(2) { width: 75vw;margin: 0 auto;}
.graduation .inner ul  .dot_gra_line{width: 75vw; height: 1px; border-left: none; border-bottom: dotted 3px #e5dab9; margin: 20px auto;}
.graduation .inner ul li .name { font-size: 20px; margin-top: 16px; margin-bottom: 12px;}
.graduation .inner ul li p { font-size: 16px; line-height: 1.9;}
}


.footer_info { margin-top: -100px;}