﻿/* all page */
/*fonts*/

/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: var(--color1);text-decoration: underline;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
#google_privacy a{color: var(--color1);}
:root{
	--color1: #093090;
	--color2: #917e60;
	--color3: #00a0e9;
	--color4: #d9d9d9;
	/*--font-jp: 'Noto Sans JP', "游ゴシック Medium", sans-serif;*/
}


/* header */
#logo {
    width: 180px;
    height: 180px;
}
#fix_bnr{
	bottom: 10px;
	right: 110px;
	z-index: 5;
	width: 400px;
}
@media screen and (max-width: 667px){
	#fix_bnr{width: 250px;right: 75px;}
}

/* footer */



/* top ----------------------------------------------------------------*/

/* main img */
#main_img .main_logo{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 40%;
    max-width: 700px;
    mix-blend-mode: color-dodge;
}
#main_img .catch01{
    top: 17%;
    left: 1%;
    z-index: 1;
    width: 35%;
}
#main_img .main_img01{
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 40%;
    max-width: 700px;
}
#main_img .catch02{
    bottom: 3%;
    right: 1%;
    z-index: 1;
    width: 42%;
}
.anim_box .item1{
	transform: translateX(40px);
	transition: transform 1.5s ease, opacity 2s;
	transition-property: opacity,transform;
	opacity: 0;
}
.anim_box .item2{
	transform: translateX(-40px);
	transition: transform 1.5s ease, opacity 2s;
	transition-property: opacity,transform;
	opacity: 0;
}
.anim_box .item1.start, .anim_box .item2.start{transform: translateX(0);opacity: 1;}

/* main */

/* intro */
#top_contents1::before{
    content: "";
    background-image: url('/Files/img/intro_img.png');
    background-repeat: no-repeat;
    background-position: top -30% right;
    background-size: 100%;
    width: 60%;
    max-width: 600px;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
}

/* contents */


/* topcms */
.link_type2 .cate_box a {
    color: #fff;
}
.link_type2 .cate_box a:before, .link_type2 .cate_box a:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1;
}
.link_type2 .cate_box a:after {
    top: 100%;
    background-color: var(--color1);
    transition: 0.5s;
	z-index: 3;
}
.link_type2 .cate_box a:hover:after {
    top: 0;
}
.link_type2 .cate_box .txt_wrap {
    z-index: 2;
}
.link_type2 .more {
	letter-spacing: 3px;
    box-sizing: border-box;
	opacity: 0;
	transition: opacity .8s;
	z-index: 4;
}
.link_type2 .cate_box a:hover .more {
    opacity: 1;
}

/* under page ----------------------------------------------------------------*/
#page_title .page_title_inner {padding: 150px 20px;}

/* ---------- 1536px ---------- */
@media screen and (max-width: 1536px){}
/* ---------- 1366px ---------- */
@media screen and (max-width: 1366px){}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#logo {
    width: auto;
    height: 95px;
}
#logo h1.logo {max-width: 100px;}
#main_img .main_logo {
    width: 60%;
    padding-top: 95px;
}
#main_img .catch01 {
    padding-top: 95px;
    top: 1%;
    width: 43%;
}
#main_img .main_img01 {width: 67%;}
#main_img .catch02 {width: 65%;}
#top_contents1::before {
    background-position: top -10% right;
    width: 65%;
    right: -12%;
}


}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#logo {height: 78px;}
#nav_menu {margin-top: 4px;}
#main_img .box_img{
    height: 90vh;
}
#main_img .box_img img{
    width: auto;
    height: 100%;
}
#main_img .main_logo {
    width: 80%;
    padding-top: 0;
}
#main_img .catch01 {
    top: 0;
    width: 80%;
}
#main_img .main_img01 {width: 110%;}
#main_img .catch02 {width: 100%;}
#top_contents1::before {
    background-position: top -12% right;
    width: 95%;
    right: -18%;
}

}





