﻿/* all page */
#wrap{
    overflow: hidden;
}

/* color */
.txt_color3{color: #d2b48c;} /* アクセントカラー1 */

/* background-color */
.bg_color3{background-color: #d2b48c;} /* アクセントカラー1 */

/* border-color ※!important */
.border_color3{border-color: #d2b48c;}


/* fonts */
#catch .catch_txt h2, #contents .contents_txt h2, #contents3 .contents_txt h2,#contents2 .contents_txt h2, #contents4 .contents_txt h2, #top_cms .top_cms_box .cms_title h2, #top_cms .top_cms_box .cms_title p, footer #footer #footer_box, #footer_bottom ul li a, #menu_wrap nav ul li a, footer #footer_bottom #copyright, #page_title, .cate_list li a, .cate_list li .cate_no, .cate_title, .sub_cate_title, .box_title, .box_title1, a[href^="tel:"], .pager li a {
    font-family: 'Noto Serif JP', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}

.linkStyle{
    color: #333;
    text-decoration: underline;
}
.hamburger.head_fix {
    border-radius: 5px;
}
p.gotop a {
    border-radius: 5px;
}

/* top ----------------*/

/* header */
.index_header .nav_box .inner{
    width: 80%!important;
}

/* main img */
#main_img .inner video{
	border-radius: 20px 0 0 20px;
}

/* main */

/* intro */

/* contents */
#contents .contents_img{
    width: 60% !important;
}
#contents .contents_inner .contents_txt {
	background-color: #fff;
	border-radius: 5px;
	position: absolute;
    z-index: 1;
    top: 50%;
    left: 3%;
    transform: translateY(-50%);
    padding: 30px;
    width: 40% !important;
}
#contents .contents_txt h2{
	text-align: left;
	margin-bottom: 10px;
	border-left: 5px solid #0d5072;
    padding-left: 20px;
}
#contents .contents_inner h2 span{
	display: none;
}
#contents .contents_inner .contents_txt p {
    margin-right: 0;
    padding: 0;
    background: none;
}
#contents3 .contents_img{
    width: 60% !important;
}
#contents3 .contents_inner .contents_txt {
    position: absolute;
    z-index: 1;
    top: 50%;
	right: 3%;
    transform: translateY(-50%);
    padding: 30px;
    width: 40% !important;
	background-color: #fff;
	border-radius: 5px;
}
#contents3 .contents_txt h2{
	text-align: left;
	margin-bottom: 10px;
	border-left: 5px solid #0d5072;
    padding-left: 20px;
}
#contents3 .contents_inner h2 span{
	display: none;
}
#contents .contents_inner::before{
	content: "01";
	color: #457f9c;
	font-family: 'Train One', cursive;
	font-size: 100px;
	width: auto;
	height: auto;
	position: absolute;
	top: -8%;
	left: calc(40% - 110px);
    z-index: 10;
}
#contents3 .contents_inner::before{
	content: "02";
	color: #457f9c;
	font-family: 'Train One', cursive;
	font-size: 100px;
	width: auto;
	height: auto;
	position: absolute;
	top: -8%;
	right: calc(40% - 110px);
    z-index: 10;
}
#contents2 .box{
	position: relative;
}
#contents2 .box::before{
	content: "03";
	color: #457f9c;
	font-family: 'Train One', cursive;
	font-size: 100px;
	width: auto;
	height: auto;
	position: absolute;
	top: -5%;
    right: calc(31% - 10px);
    z-index: 10;
}
#contents2 .contents_txt p{
    opacity: 1;
}

/* topcms */

/* footer */
#footer_info .bg_white_opa {
    background-color: rgba(255,255,255,0.9);
}

/* under page */

/* cms1 */

/* cms2 */

/* cms3 */

/* cms4 */

/* cms5 */

/* page7 */

/* page8 */

/* page9 */

/* page10 */


/* IE */
@media all and (-ms-high-contrast: none){
    .all_header .contact_box .header_contact_link a{
        padding: 10px 25px 8px;
    }
    .cate_list .more a{
        padding: 12px 10px 12px;
    }
    #cms_5-a .cate .cate_title span:last-of-type{
        padding-top: 0 !important;
    }
    .hamburger.head_fix{
        background-color: #0D5072;
    }
    #page2 .pager li a .posi_center{
        transform: translate(-50%,-50%);
    }
    
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    #contents .contents_img {
        width: 80% !important;
    }
    #contents .contents_inner .contents_txt {
        position: static;
        z-index: 0;
        top: 0;
        transform: translateY(0%);
        padding: 50px 40px 30px;
        width: 100% !important;
        box-sizing: border-box;
    }
	#contents .contents_inner::before {
		top: 38%;
		left: calc(10% - 30px);
	}
	#contents3 .contents_inner::before {
		top: 38%;
		right: calc(10% - 50px);
	}
	#contents2 .box::before {
		top: 33%;
		right: calc(6% - 30px);
	}
	#contents3 {
		padding-top: 0;
	}
    #contents3 .contents_img {
        width: 80% !important;
    }
	#contents3 .contents_inner .contents_txt {
		position: static;
		z-index: 0;
		top: 0;
		transform: translateY(0%);
		padding: 50px 40px 30px;
		width: 100% !important;
		box-sizing: border-box;
	}
    .all_header .nav_box .inner #logo{
        width: 30.66667%!important;
    }
    .all_header #global-nav ul li {
        padding: 10px;
        width: auto;
    }
    .all_header #global-nav ul li:last-of-type {
        padding: 10px;
    }
	
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    #header .nav_box .inner {
        width: 60%!important;
    }
    .loaded #main_img {
        padding-top: 58px !important;
    }
	#main_img .inner video {
		border-radius: 0;
	}
	#main_img .inner {
		padding-bottom: calc(0%*616/996) !important;
	}
	.index_header #logo, #logo {
		max-width: 220px;
	}
	#contents .contents_img {
        width: 90% !important;
    }
    #contents .contents_inner .contents_txt {
        padding: 40px 20px 30px;
    }
	#contents3 .contents_img {
        width: 90% !important;
    }
    #contents3 .contents_inner .contents_txt {
        padding: 30px 20px 30px;
    }
	#contents .contents_inner::before {
		top: 20%;
		font-size: 70px;
	}
	#contents3 .contents_inner::before {
		top: 23%;
    	right: calc(6% - 10px);
		font-size: 70px;
	}
	#contents2 .box::before {
		top: 62%;
		right: calc(10% - 30px);
		font-size: 70px;
	}
    .all_header .nav_box .inner #logo{
        width: 100%!important;
    }
	
}

/*20211025公開後修正*/
#contents4 .contents_img{
    width: 60% !important;
    margin: 0 0 0 auto;
    overflow: hidden;
}
#contents4 .contents_inner .contents_txt {
	background-color: #fff;
	border-radius: 5px;
	position: absolute;
    z-index: 1;
    top: 50%;
    left: 3%;
    transform: translateY(-50%);
    padding: 30px;
    width: 40% !important;
}
#contents4 .contents_txt h2{
	text-align: left;
	margin-bottom: 10px;
	border-left: 5px solid #0d5072;
    padding-left: 20px;
}
#contents4 .contents_inner h2 span{
	display: none;
}
#contents4 .contents_inner .contents_txt p {
    margin-right: 0;
    padding: 0;
    background: none;
}
#contents4 .contents_inner::before{
	content: "03";
	color: #457f9c;
	font-family: 'Train One', cursive;
	font-size: 100px;
	width: auto;
	height: auto;
	position: absolute;
	top: -8%;
	left: calc(40% - 110px);
    z-index: 10;
}
#contents2 .box::before {
    content: "04";
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    #contents4 .contents_img {
        width: 80% !important;
        margin: auto;
    }
    #contents4 .contents_inner .contents_txt {
        position: static;
        z-index: 0;
        top: 0;
        transform: translateY(0%);
        padding: 50px 40px 30px;
        width: 100% !important;
        box-sizing: border-box;
    }
	#contents4 .contents_inner::before {
		top: 38%;
		left: calc(10% - 30px);
	}
	
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
	#contents4 .contents_img {
        width: 90% !important;
    }
    #contents4 .contents_inner .contents_txt {
        padding: 40px 20px 30px;
    }
	#contents4 .contents_inner::before {
		top: 20%;
		font-size: 70px;
	}
	
}

/*20211101公開後修正*/
#contents .contents_inner::before{
    top: 0;
    left: 10px;
}
#contents3 .contents_inner::before{
    top: 0;
    right: 10px;
}
#contents4 .contents_inner::before{
    top: 30px;
    left: 10px;
}
#contents2 .box::before{
    right: 10px;
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    #contents .contents_inner::before{
        top: -10px;
        font-size: 80px;
    }
    #contents3 .contents_inner::before{
        top: -10px;
        font-size: 80px;
    }
    #contents4 .contents_inner::before{
        top: -10px;
        font-size: 80px;
    }
    #contents2 .box::before{
        top: 30%;
    }
    #contents3{
        padding-top: 100px;
    }
	
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
	#contents .contents_inner::before{
        top: 0;
        font-size: 50px;
    }
    #contents3 .contents_inner::before{
        top: 0;
        font-size: 50px;
    }
    #contents4 .contents_inner::before{
        top: 0;
        font-size: 50px;
    }
    #contents2 .box::before{
        top: 55%;
    }
    #contents3{
        padding-top: 50px;
    }
	
}

/*20220524公開後修正*/
#main_img {
    left: 22%;
    width: 80%;
}
#main_img .inner {
    margin-right: 0;
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 1280px){
#main_img {
    left: 25%;
    width: 75%;
}
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#main_img {
    left: 34%;
    width: 66%;
}
.index_header .nav_box {
    padding: 30px 0px 4% 10px;
}
.index_header .nav_box .inner {
    width: 68%!important;
}
.index_header #global-nav ul li {
    letter-spacing: 1px;
}
.all_header #global-nav ul li, .all_header #global-nav ul li:last-of-type {
    padding: 6px;
}
#header .nav_box{
    padding: 10px;
}
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#main_img {
    left: 0;
    width: 100%;
}
.index_header .nav_box, .nav_box {
    padding: 15px 10px 15px 15px;
}
#header .nav_box{
    padding: 20px;
}
}
