@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/*#greetingArea{
    font-family: "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Noto Sans", "Noto Sans CJK JP","メイリオ","Meiryo","ＭＳ Ｐゴシック", "MS P Gothic","Osaka", Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
}
*/

/*SP → タブレット　→ PC*/
/* iPhone 縦 */
/***************************
　KEYVISUAL
****************************/
#keyVisual{ display: block; text-align: center; background-color: #FBFCF0; }

#keyVisual .visual-wrapper{
    position: relative;
    width: 100vw;
    background: url(../images/key_about.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
}
#keyVisual .visual-wrapper:before{
    content: "";
    display: block;
    padding-top: 80%;
}

#keyVisual .visual-wrapper .visual_img{
    position: absolute;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
    left: 0;
    right: 0;
}
#keyVisual .visual-wrapper .visual_img img{ width: 70%; }


/***************************
　CONTENT
****************************/
#mainContents{ position: relative; }
#pageTop{
	position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
}
#pageTop img{ width: 70px; height: auto; }

/*============ #pageNav ===============*/

#pageNav{ background-color: #FBCA4D; font-size: 0.7em; overflow: hidden;}
#pageNav:after{ content: ""; clear: both; display: block; }
#pageNav ul{ /*display: flex; justify-content: space-around;*/ margin: 0px auto;}
/*#pageNav li{ padding: 10px 0px; position: relative;}*/
#pageNav li{
    position: relative;
    float: left;
    letter-spacing: 0.1em;
    width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
    width : -webkit-calc(100% / 3) ;
    width : calc(100% / 3) ;
    text-align: center;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*奇数のli要素に適応*/
#pageNav li:nth-child(3),
#pageNav li:nth-child(6) {
  border-right: none;
}
#pageNav li a {
  display: block;
  line-height: 44px;
   color: #FFFFFF;
  text-decoration: none;
}

#pageNav li a,
#pageNav li a:link,
#pageNav li a:active,
#pageNav li a:visited{ font-weight: bold; }

#pageNav li:after{
    background: url(../images/icon_nav.png) no-repeat;
    background-size: 100%;
    position: absolute;
    content: "";
    display: inline-block;
    padding: 5px;
    z-index: 0;
    bottom: 17px;
    right: 10px;

}
#greetingArea {
    position: relative;
    padding: 70px 7vw 100px;
    background-color: rgba(251, 202, 77, 0.1);
}
#greetingArea .title_area img{
    width: auto;
    height: 22px;
}
#greetingArea h2{
    color: #FBCA4D;
    letter-spacing: 0.8em;
}

#greetingArea .text{
    font-size: 0.9em;
    line-height: 2em;
    /*letter-spacing: 0.1em;*/
    /*padding: 50px 0 0;*/
}

#greetingArea .owner{
    padding: 50px 0 0;
    font-weight: bold;
}


#philosophyArea {
    padding: 70px 7vw 100px;
    position: relative;
    overflow: hidden;
}





#philosophyArea .title_area img{
    width: auto;
    height: 22px;
}
#philosophyArea h2{
    color: #FBCA4D;
    letter-spacing: 0.8em;
}
#greetingArea h3,
#philosophyArea h3,
#storyArea h3,
#conceptArea h3{
    font-size: 1.9em;
    padding: 50px 0px;
    font-weight: bold;
    letter-spacing: 0.1em;
}

#philosophyArea .title_area,
#storyArea .title_area,
#conceptArea .title_area{
    padding: 0 0 70px;
}


#philosophyArea .sub_pic img,
#storyArea .sub_pic img,
#conceptArea .sub_pic img{
    width: 100%;
}

#philosophyArea .text{
    font-size: 0.9em;
    line-height: 2em;
}

#storyArea {
    position: relative;
    background-color: rgba(251, 202, 77, 0.1);
    padding: 70px 7vw 100px;
    overflow: hidden;
    text-align: left;
}

#storyArea .sub_pic img{ width: 100%; }





#storyArea .dots_o{
    background-image: url(../images/dot_line.png);
    background-size: 300%;
    background-position: bottom;
    background-repeat: repeat-x;
}

#storyArea .title_area img{ width: auto; height: 22px; }
#storyArea h2{
    color: #FBCA4D;
    letter-spacing: 0.8em;
}

#storyArea .birth_title{
    color: #FBCA4D;
    letter-spacing: 0.2em;
    font-weight: bolder;
    font-size: 1.3em;
    padding: 0 0 10px 0;
}
#storyArea .birth_text{
    font-size: 0.9em;
    line-height: 2em;
    padding: 0 0 70px 0;
}

#storyArea .storyArea_expand{
    text-align: left;
    background-image: url(../images/about_story01.png);
    background-size: 250px;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: 50px;
}

#storyArea .expand_title,
#storyArea .future_title{
    color: #FBCA4D;
    letter-spacing: 0.2em;
    font-weight: bolder;
    font-size: 1.3em;
    padding: 70px 0 10px 0;
}
#storyArea .expand_text,
#storyArea .future_text{
    font-size: 0.9em;
    line-height: 2em;
    padding: 0 0 70px 0;

}
#storyArea .storyArea_future{
    background-image: url(../images/about_story02.png);
    background-size: 200px;
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: 50px;
}




#conceptArea {
    position: relative;
    padding: 70px 7vw 100px;
}
#conceptArea .title_area img{
    width: auto;
    height: 22px;
}
#conceptArea h2{
    color: #FBCA4D;
    letter-spacing: 0.8em
}

#conceptArea .concept_list{
    font-size: 1em;
    line-height: 2em;
}
#conceptArea .concept_list li{
    margin: 0 0 10px 0;
}

#conceptArea .concept_list .num{
    width: 20px;
    font-size: 1.4em;
    font-weight: bold;
    padding-right: 10px;
    color: #FBCA4D;
    display: table-cell;
}
#conceptArea .concept_list .text{
    display: table-cell;
}


#overviewArea {
    position: relative;
    background-color: rgba(254, 239, 202, 0.3);
    padding: 70px 7vw 100px;
    overflow: hidden;
    text-align: left;
    font-size: 0.85em;
}
#overviewArea .title_area{ padding-bottom: 7vw; }
#overviewArea h2{
    color: #FBCA4D;
    letter-spacing: 0.8em;
    font-weight: bold;
    padding: 2vh 0;
}

#overviewArea dt{
    font-weight: bold;
    padding: 10px 0px 5px;
    border-top: 1px solid #FBCA4D;
}
#overviewArea dd{ padding: 5px 0px 10px; }
#overviewArea dd li{
    padding: 10px 0px;
    border-bottom: 1px dashed #FBCA4D;

}
#overviewArea dd li:last-child{
    padding: 10px 0px;
    border-bottom: 1px solid #FBCA4D;
}
#overviewArea .jigyo { border-top: none; }

.mirai_hoiku{ background-color: #F0908A; }
.mirai_day{ background-color: #5DC2D0; }
.mirai_gakudo{ background-color: #69BC82; }
.mirai_pocket{ background-color: #FFEC3F; }
.tsubomi_hoiku{ background-color: #F19EBC; }


@media only screen and (-webkit-min-device-pixel-ratio: 2) {
#pageNav li:after{
    background: url(../images/icon_nav@2x.png) no-repeat;
    background-size: 100%;
    position: absolute;
    content: "";
    display: inline-block;
    padding: 5px;
    z-index: 0;
    bottom: 17px;
    right: 10px;
}

#storyArea .dots_o{
    background-image: url(../images/dot_line@2x.png);
}
#storyArea .storyArea_expand{
    background-image: url(../images/about_story01@2x.png);
}
#storyArea .storyArea_future{
    background-image: url(../images/about_story02@2x.png);
}
}

/*============ #locationArea ===============*/
#locationArea{
    padding: 70px 0vw 0px;
    overflow: hidden;
    text-align: left;
    font-size: 0.85em;
}
#locationArea .title_area{ padding: 0 7vw 7vw; }

#locationArea h2{
	font-weight: bold;
    letter-spacing: 0.3em;
    padding: 2vh 0;
    color: #FBCA4D;
}

#locationArea .location_list, #locationArea .location_map{ width: initial; }
#locationArea .location_list { padding: 0 7vw 60px; }
#locationArea .location_map img{ width: 100%;}

#locationArea .mirai_w{ color: #FBCA4D; }
#locationArea .miraihoiku_w{ color: #F0908A; }
#locationArea .tsubomi_w{ color: #F19EBC; }
#locationArea .day_w{ color: #5DC2D0; }
#locationArea .gakudo_w{ color: #69BC82; }
#locationArea .pocket_w{ color: #FFEC3F; }
#locationArea .gray_w{ color: #999999; }


#locationArea .location_list tr{ border-top: 1px solid #999999; }
#locationArea .location_list tr:last-child{ border-bottom: 1px solid #999999; }
#locationArea tr.loc_day1,
#locationArea tr.loc_miraihoiku2{ border-top: none!important; }


.dot{
  background-image: linear-gradient(to right, #999, #999 2px, transparent 2px, transparent 2px);
  background-size: 7px 2px;　/* この値を変更 */
  background-position: top;
  background-repeat: repeat-x;
}

#locationArea .location_list th{
    width: 35%;
    text-align: center;
}

#locationArea .location_list td{
    padding: 20px 0px 20px 10px;
    font-weight: bold;
}
#locationArea .gmap{ margin-left: 25px; position: relative; }
#locationArea .gmap:before {
    content: "";
    display: inline-block;
    height: 22px;
    width: 20px;
    left: -22px;
    bottom: -5px;
    position: absolute;
}
#locationArea .gmap:after {
    content: "";
    display: inline-block;
    height: 22px;
    width: 22px;
    left: 90px;
    bottom: -6px;
    position: absolute;
}


/* googlemap Before */
#locationArea .loc_mirai .gmap:before { background: url(/common/images/icon_map_mirai.png) no-repeat; }
#locationArea .loc_miraihoiku1 .gmap:before { background: url(/common/images/icon_map_miraihoiku1.png) no-repeat; }
#locationArea .loc_miraihoiku2 .gmap:before { background: url(/common/images/icon_map_miraihoiku2.png) no-repeat; }
#locationArea .loc_tsubomi .gmap:before { background: url(/common/images/icon_map_tsubomi.png) no-repeat; }
#locationArea .loc_day1 .gmap:before { background: url(/common/images/icon_map_day1.png) no-repeat; }
#locationArea .loc_day2 .gmap:before { background: url(/common/images/icon_map_day2.png) no-repeat; }
#locationArea .loc_gakudo .gmap:before { background: url(/common/images/icon_map_gakudo.png) no-repeat; }
#locationArea .loc_pocket .gmap:before { background: url(/common/images/icon_map_pocket.png) no-repeat; }

/* googlemap After */
/*#locationArea .loc_mirai .gmap:after { background: url(/common/images/icon_ex) no-repeat; }*/
#locationArea .miraihoiku .gmap:after { background: url(/common/images/icon_ex_miraihoiku.png) no-repeat; background-size: 70%; }
#locationArea .tsubomi .gmap:after { background: url(/common/images/icon_ex_tsubomi.png) no-repeat; background-size: 70%; }
#locationArea .day .gmap:after { background: url(/common/images/icon_ex_day.png) no-repeat; background-size: 70%; }
#locationArea .gakudo .gmap:after { background: url(/common/images/icon_ex_gakudo.png) no-repeat; background-size: 70%; }
#locationArea .pocket .gmap:after { background: url(/common/images/icon_ex_pocket.png) no-repeat; background-size: 70%; }


.miraihoiku_ex,
.tsubomi_ex,
.day_ex,
.gakudo_ex,
.pocket_ex{
	height: 20px;
    width: 15px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    right: 0;
    top: 50%;
    bottom: 0;
    content: "";
}
.miraihoiku_ex{ background: url(/common/images/icon_ex_miraihoiku.png) no-repeat;  background-size: 100%; background-position: 50% 50%;}
.tsubomi_ex{ background: url(/common/images/icon_ex_tsubomi.png) no-repeat;  background-size: 100%; background-position: 50% 50%;}
.day_ex{ background: url(/common/images/icon_ex_day.png) no-repeat;  background-size: 100%; background-position: 50% 50%;}
.gakudo_ex{ background: url(/common/images/icon_ex_gakudo.png) no-repeat;  background-size: 100%; background-position: 50% 50%;}
.pocket_ex{ background: url(/common/images/icon_ex_pocket.png) no-repeat;  background-size: 100%; background-position: 50% 50%;}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* googlemap Before */
#locationArea .loc_mirai .gmap:before { background: url(/common/images/icon_map_mirai@2x.png) no-repeat; background-size: 13px auto; }
#locationArea .loc_miraihoiku1 .gmap:before { background: url(/common/images/icon_map_miraihoiku1@2x.png) no-repeat; background-size: 13px auto; }
#locationArea .loc_miraihoiku2 .gmap:before { background: url(/common/images/icon_map_miraihoiku2@2x.png) no-repeat; background-size: 13px auto; }
#locationArea .loc_tsubomi .gmap:before { background: url(/common/images/icon_map_tsubomi@2x.png) no-repeat; background-size: 13px auto; }
#locationArea .loc_day1 .gmap:before { background: url(/common/images/icon_map_day1@2x.png) no-repeat; background-size: 13px auto; }
#locationArea .loc_day2 .gmap:before { background: url(/common/images/icon_map_day2@2x.png) no-repeat; background-size: 13px auto; }
#locationArea .loc_gakudo .gmap:before { background: url(/common/images/icon_map_gakudo@2x.png) no-repeat; background-size: 13px auto; }
#locationArea .loc_pocket .gmap:before { background: url(/common/images/icon_map_pocket@2x.png) no-repeat; background-size: 13px auto; }

/* googlemap After */
#locationArea .miraihoiku .gmap:after { background: url(/common/images/icon_ex_miraihoiku@2x.png) no-repeat; background-size: 70%; }
#locationArea .tsubomi .gmap:after { background: url(/common/images/icon_ex_tsubomi@2x.png) no-repeat; background-size: 70%; }
#locationArea .day .gmap:after { background: url(/common/images/icon_ex_day@2x.png) no-repeat; background-size: 70%; }
#locationArea .gakudo .gmap:after { background: url(/common/images/icon_ex_gakudo@2x.png) no-repeat; background-size: 70%; }
#locationArea .pocket .gmap:after { background: url(/common/images/icon_ex_pocket@2x.png) no-repeat; background-size: 70%; }



.miraihoiku_ex{ background: url(/common/images/icon_ex_miraihoiku@2x.png) no-repeat;  background-size: 100%; background-position: 50% 50%;}
.tsubomi_ex{ background: url(/common/images/icon_ex_tsubomi@2x.png) no-repeat;  background-size: 100%; background-position: 50% 50%;}
.day_ex{ background: url(/common/images/icon_ex_day@2x.png) no-repeat;  background-size: 100%; background-position: 50% 50%;}
.gakudo_ex{ background: url(/common/images/icon_ex_gakudo@2x.png) no-repeat;  background-size: 100%; background-position: 50% 50%;}
.pocket_ex{ background: url(/common/images/icon_ex_pocket@2x.png) no-repeat;  background-size: 100%; background-position: 50% 50%;}

}


@media screen and (min-width:480px) {
/*　for iPhone Landscape　(iPhone 横)　*/

#keyVisual .visual-wrapper{
    background-size: cover;
    background-position: center 80%;
}

#keyVisual .visual-wrapper:before{ padding-top: 300px; }
#keyVisual .visual-wrapper .visual_img img{ width: auto; height: 200px; }

#locationArea .location_list th img{ height: 100%; }
#locationArea .location_list td{ /*padding: 25px 0px 25px 10px; */}

}



@media screen and (min-width:768px){

/***************************
　for iPad 　
****************************/
#pageNav{
    font-size: 0.9em;
    padding: 0 20px;
    margin: 0 0 0 -20px;
}

#pageNav ul{ display: flex; justify-content: space-around; }
#pageNav li{
    position: relative;
    float: initial;
    letter-spacing: initial;
    width : auto ;
    text-align: center;
    border-bottom: none;
    border-right: none;
    -webkit-box-sizing: initial;
    -moz-box-sizing: initial;
    box-sizing: initial;
}

#pageNav li:after{
    background-size: 100%;
    bottom: 30px;
    right: -20px;
}

#pageNav li a{
    width: 80px;
    line-height: 70px;
}


#greetingArea{ padding:70px 7vw; font-size: 1.2em; letter-spacing: 0.1em;}


#philosophyArea .title_area,
#storyArea .title_area,
#conceptArea .title_area{
    padding: 0 0 0px;
}

#philosophyArea .sub_pic{
    position: absolute;
    width: 330px;
    right: -100px;
    top: 50px;
    z-index: -10;
}




#philosophyArea{
    padding:70px 7vw;
}

#storyArea{
    padding: 70px 7vw;
    overflow: hidden;
    text-align: right;
}
#storyArea .sub_pic{
    position: absolute;
    width: 400px;
    left: -100px;
    top: 50px;
    z-index: -10;
}

#storyArea .dots_o{
    background-image: url(../images/dot_line.png);
    background-size: 100%;
    background-position: bottom left;
    background-repeat: repeat-x;
}

#conceptArea{
    padding: 130px 7vw;
    overflow: hidden;
}
#conceptArea .sub_pic{
    position: absolute;
    width: 400px;
    right: -100px;
    top: 50px;
    z-index: -10;
}

#overviewArea {  }
#overviewArea .title_area{ }
#overviewArea h2{  }

#overviewArea dt{
    width: 12%;
    float: left;
    font-weight: bold;
    padding: 10px 12% 10px 6%;
    border-top: none;
    -moz-text-align-last: justify;
    text-align-last: justify;
}
#overviewArea dd{ padding: 10px 0px; border-top: 1px solid #FBCA4D;}
#overviewArea dd:last-child{ border-bottom: 1px solid #FBCA4D;}
#overviewArea dd li{
    padding: 10px 0px;
    width: 70%;
    float: right;
}
#overviewArea dd li:first-child{
    padding: 0px 0px 10px;

}
#overviewArea dd li:last-child{
    padding: 10px 0px 0px;
    border-bottom: none;
}
#overviewArea .jigyo { border-top: none; }

.mirai_hoiku{ background-color: #F0908A; }
.mirai_day{ background-color: #5DC2D0; }
.mirai_gakudo{ background-color: #69BC82; }
.mirai_pocket{ background-color: #FFEC3F; }
.tsubomi_hoiku{ background-color: #F19EBC; }

#locationArea .gmap{ float: right; padding: 0 40px 0 0; }
#locationArea table{ width: 100%;}


}
@media screen and (min-width:1024px) {
/***************************
　for PC 　
****************************/
.w_max{ max-width: 1300px; margin: 0 auto;}
#pageNav{ padding: 0px 16vw; }

#greetingArea{ padding: 70px 13vw; }
#philosophyArea{ padding: 70px 13vw; }
#storyArea{ padding: 70px 7vw; }
#conceptArea{  }

#philosophyArea:after,
#storyArea:after,
#conceptArea:after{
    content: "";
    clear: both;
    display: block;
}

#philosophyArea .sub_pic,
#storyArea .sub_pic,
#conceptArea .sub_pic{
    position: initial;
}


#philosophyArea .sub_pic{
    width: 390px;
    margin: -40px -100px 0 -100px;
    float: right;
}
#storyArea .sub_pic{
    width: 460px;
    margin: -50px 0 0 -130px;
    float: left;
}
#conceptArea .sub_pic{
    width: 450px;
    margin: -50px -50px 0 -150px;
    float: right;
}
#conceptArea .concept_list{
    padding: 70px 0 0;
}
#locationArea{
	padding: 0;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

#locationArea .location_contents,
#locationArea .location_map{
	flex-grow: 1;
	width:50%;
}
#locationArea .location_contents{ padding: 100px 7vw 7vw 7vw; }

#locationArea .title_area{
	padding: 0 0 20px;
    width: 90%;
    margin: 0;
}
#locationArea .location_list{
    font-size: 0.9em;
    width: 100%;
    margin: 0 auto;
    padding: 0 0vw 0px;
}


#locationArea .gmap{ text-align: right; margin-right: 25px; margin-left: 0;}
#locationArea .gmap:before {
    content: "";
    display: inline-block;
    height: 18px;
    width: 16px;
    right: 88px;
    left: initial;
    bottom: -2px;
    position: absolute;
}
#locationArea .gmap:after {
    content: "";
    display: inline-block;
    height: 20px;
    width: 20px;
    right: -30px;
    left: initial;
    bottom: -6px;
    position: absolute;
}
#locationArea .location_map {
    background: none;
    padding: 200px 7vw 0 0;
}
#locationArea .location_map img { display: block; max-width: 500px; }

#locationArea .gmap{ float: initial; padding: 0 0 0 0; }
#locationArea table{ width: 100%; }


}

@media screen and (min-width:1200px) {
#locationArea .location_map img { max-height: 916px; height: 100%; width: auto; }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
#locationArea .location_map { background: none; }
}
@media screen and (min-width:1400px) {
/***************************
　for PC 2
****************************/


#greetingArea,
#philosophyArea,
#storyArea,
#conceptArea{
    padding: 70px 16vw;
}

#overviewArea{ padding:10vw; }


}