/********** font **********/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@800&family=Rajdhani:wght@600&display=swap');

:root{
    --font-jp: 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
    --font-en: 'Rajdhani', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	/*font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";*/
}
.font1, .font_en, a[href^="tel:"]{
    font-family: var(--font-en);
}

/********** color **********/

:root{
    --color1: #FFA822;
    --color1s: #FFD524;
    --color2: #F7F7F5;
    --color3: #F9644B;
    --color4: #E8EAE4;
    --black: #2A303F;
}

/********** all **********/

.normal_img img, .rectangle_img, .square_img{
    clip-path: polygon(20px 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}

.overlay{
    background-image: linear-gradient(to right top, var(--color1), var(--color1s));
    backdrop-filter: none;
}
.overlay:before{
    display: none;
}

#loading{
    background-color: #fff;
}
#loading #loading_text .progressbar-text{
    color: var(--color1)!important;
}

#wrap{
    color: var(--black);
}

header.scr_header{
    background: none!important;
}
header::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, var(--color1), var(--color1s));
    opacity: 0;
    top: 0;
    left: 0;
    transition: opacity 1s;
}
header.scr_header::before{
    opacity: 0.9;
}

#logo img{
    max-width: 140px;
}

#logo2 img{
    max-width: 200px;
}

footer .scr{
    font-family: var(--font-en);
}

#footer_info .tel_bt a, #footer_info .contact_bt a{
    background-color: var(--color3);
}
#footer_info .tel_bt a:hover, #footer_info .contact_bt a:hover{
    background-color: var(--color1);
}

/********** top **********/

#main_img:before{
    display: none;
}
#main_img .scr, #page_title_img .scr{
    font-family: var(--font-en);
}
#main_img .scr, #page_title_img .scr{
    color: var(--color3);
}
#main_img .scroll_d > span, #page_title_img .scroll_d > span{
    background-color: rgba(249,100,75,0.4);
}
#main_img .scroll_d > span::before, #page_title_img .scroll_d > span::before{
    background-color: var(--color3);
}
#video{
    top: 0;
    left: 0;
    height: 100%!important;
}
#main_img .main_img{
    z-index: 1;
    margin-bottom: -1px;
}

main.blur{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: #fff;
    position: relative;
}

.more_item{
    background-image: linear-gradient(to right top, var(--color3), var(--color1));
    border: none;
    font-family: var(--font-en);
}
.more_item:hover{
    transform: scale(0.95);
}

.modal_title1{
    display: none;
}

#intro #intro_wrap{
    background-image: url('./Dup/img/bg_img1.png');
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: top right;
}
#intro .intro_title1{
    font-family: var(--font-jp);
    text-align: left;
}
#intro .intro_title2{
    font-family: var(--font-en);
    text-align: left;
}
#intro .intro_photo figure{
    clip-path: polygon(40px 0%, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
}
#intro .intro_photo h2{
    font-family: var(--font-en);
}

.top_title h2{
    font-family: var(--font-en);
}

.top_title .top_title_color {
    background-image: linear-gradient(to right top, var(--color1), var(--color1s));
}

#contents_wrap{
    background-image: url('./Dup/img/bg_img2.png'), url('./Dup/img/bg_img3.png');
    background-size: 30%, 30%;
    background-repeat: no-repeat;
    background-position: top 5% left 0, bottom 30% right;
}
#contents .con_title {
    font-family: var(--font-jp);
    font-size: 40px;
}

#top_cms .cms_title p{
    font-family: var(--font-en);
}

#page_title .en{
    font-family: var(--font-en);
}

.cate_list:before{
    font-family: var(--font-en);
}

.pager li a:hover{
    background-color: var(--color1)!important;
}

/********** under_page **********/

#page_title_img {
    height: 300px;
}
#page_title_img:before {
    background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,168,34,0.7))!important;
    opacity: 1;
}

.cate_title{
	background-color: transparent;
	padding: 0;
	margin: 0;
	display: block;
	border: none;
	width: 100%!important;
	font-size: 24px;
	text-align: left;
	padding-bottom: 10px!important;
	margin-bottom: 50px;
	color: var(--black);
	font-weight: normal;
	background-image: linear-gradient(to bottom, var(--color1), var(--color1)), linear-gradient(to bottom, currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 50px 2px, 100% 2px;
	background-position: left bottom;
	font-weight: bold;
}


/********** tablet 780 **********/
@media screen and (max-width: 768px){
#page_title_img {
    height: 40vw!important;
}
#intro #intro_wrap {
    background-size: 50%;
    background-position: top right -20%;
}
#contents_wrap {
    background-size: 60%;
    background-position: top 10% left -20%, bottom 30% right -30%;
}
}

/********** mobile 750 **********/
@media screen and (max-width: 667px){
#logo img{
    max-width: 100px;
}
#video {
    height: 80vw!important;
}
#intro #intro_wrap {
    background-size: 80%;
    background-position: top right -150%;
}
#contents_wrap {
    background-size: 80%;
    background-position: top 10% left -140%, bottom 30% right -130%;
}
#contents .con_title {
    font-size: 24px;
}
}