@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&family=Red+Hat+Display&display=swap');

body, .font_sans-serif, .hannari{
    font-family: 'Noto Serif JP', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}

.pop300, .pop400, .didot, a[href^="tel:"], .button_container, .cate_title_h::before{
    font-family: 'Red Hat Display', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}

.font_bold{
    font-weight: normal;
}

/*** fade ***/

.fadein_up, .fadein_up2{
    opacity: 0;
    filter: blur(5px);
    transform: translateY(10px);
    transition: transform 1.5s ease;
    transition-property: opacity, filter, transform;
}
.fadein_up.scrollin, .fadein_up2.scrollin{
    opacity: 1;
    filter: none;
    transform: none;
}

/*** other ***/

h2, h3, h4, h5, h6{
    line-height: 1.5;
}

#wrap{
    counter-reset: number 0;
    background-color: #f7f7f5;
}

.rectangle_img2{
	position: relative;
	overflow: hidden;
}
.rectangle_img2 img{
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

.con_box.pd_5per{
    background-color: transparent;
    padding: 0;
}

.portrait_img {
    height: 700px!important;
}
.back1:before, .back2:before{
    display: none;
}

header.scr_header, .overlay{
    background-image: none!important;
    background-color: rgba(91,91,91,0.8)!important;
}
#pc_nav li:not(:last-child), #top_pc_nav li:not(:last-child), #footer_nav li:not(:last-child){
    margin-right: 30px;
}
#pc_nav li{
    max-width: inherit;
}
#pc_nav li a::after, #top_pc_nav li a::after, #footer_nav li a::after{
    height: 1px;
}
#pc_nav li:last-child a::after{
    display: none;
}
.nav_menu_more a .icon:before{
    display: none;
}
header #logo{
    width: 170px!important;
    padding: 10px 0;
}

.num{
    display: none;
}

section .line:before{
    display: none;
}

#main_img .bg_white{
    background-color: transparent;
    padding: 50px 0;
    border: solid 1px #fff;
}

#intro_h{
    z-index: 1;
}
#intro_h::before{
    position: absolute;
    content: "";
    width: 30%;
    height: 600px;
    left: 0;
    top: 100px;
    background-color: #fff;
    z-index: -1;
}
#intro_h .intro_img{
    height: 400px;
}
#intro_h .con_no{
    transform: rotate(90deg);
    transform-origin: top left;
    top: 50px;
    left: -20px;
}

#contents1 .con_box, #contents2 .con_box{
    margin-top: 10%;
}

#contents3 .con_box{
    text-align: left;
    margin-right: 0;
    margin-left: 30%;
}
#contents3_wrap:before{
    width: 90%;
    background-size: cover;
}
#contents3_wrap:after{
    display: none;
}
#contents3 h3{
    text-align: center;
}

#top_cms .top_cms_box:not(:first-of-type){
    background-color: #edede8;
    padding-bottom: 100px;
}
#top_cms .top_cms_box:nth-of-type(4){
    padding-top: 100px;
}
#top_cms .cms_title p{
    font-size: 40px;
    letter-spacing: 10px;
    display: inline-block;
    border-bottom: solid 1px;
    line-height: 1.5;
    margin-bottom: 20px;
}
#top_cms .cms_title p::before{
    display: none;
}
#top_cms .cms_title h3{
    font-size: 16px;
    letter-spacing: 5px;
    color: #3f7f2d;
}

.more_btn{
    border: solid 1px #3f7f2d;
    color: #3f7f2d;
    z-index: 1;
    max-width: 200px;
    transition-delay: 0s!important;
}
.more_btn:hover{
    color: #fff;
}
.more_btn:before{
    display: none;
}
.more_btn:after{
    top: 0;
    left: 0;
    right: auto;
    transition-delay: 0s!important;
    background-color: #3f7f2d!important;
    z-index: -1;
}

#page_title{
    height: 400px;
    margin-bottom: 50px;
}
#page_title:before{
    background-color: rgba(91,91,91,0.6);
}
#page_title .page_title_box{
    top: auto;
    bottom: -50px;
    transform: translate(-50%);
    padding: 50px;
}
#page_title p{
    display: inline-block;
    border-bottom: solid 1px;
    margin-bottom: 20px;
    opacity: 1;
}

#cms_5-c .box_txt1::before, .cms_5-c .box_txt1::before{
    line-height: 1.7;
}

.cate_title_h{
    line-height: 2;
}
.cate_title_h::before{
    display: block;
    color: #3f7f2d;
    margin-bottom: 20px;
    counter-increment: number 1;
    content: "0" counter(number);
    font-size: 18px;
    letter-spacing: 5px;
}

.youtube_box{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube_box iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

#page10 .more_btn{
    max-width: 300px;
}
#page10 .more_btn .en{
    transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}
#page10 .more_btn:hover .en{
    color: #fff;
}

#info_contact a:hover .info_bg{
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1.1);
}


#footer{
    background-color: #fff;
}
#footer h2{
    display: none;
}
#footer_con{
    padding-top: 50px;
}


/** tablet 780 **/
@media screen and (max-width: 768px){
#intro_h .intro_img{
    height: 40vw;
}
#contents1 .con_box, #contents2 .con_box {
    margin-top: 0
}
#page_title{
    height: 300px;
}
#page_title .page_title_box {
    padding: 40px 0;
    width: 60%;
}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
#contents1 h3, #contents2 h3{
    text-align: center;
}
#intro_h::before {
    width: 70%;
    height: 400px;
    top: -30px;
}
#intro_h .intro_title > span{
    padding-top: 70px;
}
#intro_h .con_no {
    transform: none;
    transform-origin: top left;
    top: 40px;
    left: 20px;
}
#contents1 .con_box, #contents2 .con_box {
    margin-top: 30px
}
#contents3{
    margin-bottom: 150px;
}
#contents3 .con_box {
    margin-left: 5%;
    margin-right: 5%;
    background-color: #fff;
}
#contents3 .con_title{
    text-align: center;
}
#contents3_wrap:before, #contents3_wrap:after {
    top: calc(100% - 50px);
    height: auto;
    bottom: -150px;
    width: 100%;
}
#top_cms .cms_title{
    text-align: center;
}
#top_cms .cms_title p {
    font-size: 30px;
    letter-spacing: 5px;
}
#page_title .page_title_box {
    width: 90%;
}
}

/** IE **/
@media all and (-ms-high-contrast:none) {
.more_btn, .pager li a, .cate_list li a{
    padding-bottom: 10px!important;
}
#page9 .more{
    padding-bottom: 5px;
}
#page10 .more_btn{
    padding-top: 10px!important;
}
}