﻿/* all page */
/* color */
body,.txt_color_nomal{color: #1a1a1a;}
.txt_color1{color: #246298;} /* メインカラー */
.txt_color2{color: #f7f7f7} /* サブカラー */
.txt_color3{color: #69A2B0;} /* アクセントカラー1 */
.txt_color4{color: #cccccc} /* アクセントカラー2 */

/* background-color */
.bg_color1{background-color: #246298;} /* メインカラー */
.bg_color2{background-color: #F5F5F0;} /* サブカラー */
.bg_color3{background-color: #69A2B0;} /* アクセントカラー1 */
.bg_color4{background-color: #cccccc} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1{border-color: #246298;}
.border_color2{border-color: #ffbe08;}
.border_color3{border-color: #69A2B0;}
.border_color4{border-color: #cccccc}

.hvr_bg_color1:hover{background-color: #246298;} /* メインカラー */
.hvr_bg_color3:hover{background-color: #69A2B0;} /* アクセントカラー1 */
.hvr_txt_color1:hover{color: #ffbe08;} /* メインカラー */
.hvr_txt_color3:hover{color: #69A2B0;} /* アクセントカラー1 */

.linkStyle{
    color: #333;
    text-decoration: underline;
}

/* top ----------------*/

/* header */
header .nav_bg {
    border-radius: 80px;
}
header .nav_bg.trans {
    border-radius: 0;
}

/* main img */
#custom .custom_box{
	background-image: url("./Dup/img/custom_bg.jpg")!important;
	background-color: #F5F5F0;
	position: relative;
}
#custom .custom_box .custom_catch {
    width: 30vw;
    height: 30vw;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    overflow: hidden;
}
#custom .custom_box .custom_catch:before {
    content: "";
    width: 30vw;
    height: 30vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-image: url("./Dup/img/catch.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.custom_box .custom_circlearea {
    width: 42.41vw;
    height: 42.41vw;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
}
.custom_box .custom_circle {
    width: 42.41vw;
    height: 42.41vw;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center;
}
.custom_box .custom_circle01 {
    width: 1.96vw;
    height: 1.96vw;
    position: absolute;
    top: 37.28vw;
    left: 18.94vw;
    border-radius: 50%;
    background-color: #FFF;
}
.custom_box .custom_circle02 {
    width: 7.33vw;
    height: 7.33vw;
    position: absolute;
    top: 36.28vw;
    right: 25.33vw;
    border-radius: 50%;
    background-color: #D17B88;
}
.custom_box .custom_circle03 {
    width: 11.31vw;
    height: 11.31vw;
    position: absolute;
    top: -0.36vw;
    right: 4.36vw;
    border-radius: 50%;
    background-color: #ECDD7B;
}
.custom_box .custom_circle04 {
    width: 0.96vw;
    height: 0.96vw;
    position: absolute;
    top: 22.28vw;
    left: 39.94vw;
    border-radius: 50%;
    background-color: #fff;
}
.custom_box .custom_circle05 {
    width: 2.33vw;
    height: 2.33vw;
    position: absolute;
    top: 21.28vw;
    right: -4.06vw;
    border-radius: 50%;
    background-color: #fff;
}
.custom_box .custom_circle06 {
    width: 5.31vw;
    height: 5.31vw;
    position: absolute;
    top: 22.28vw;
    right: -12.06vw;
    border-radius: 50%;
    background-color: #fff;
}
.custom_circleBG{
	width: 100%;
	height: 100%;
    position: absolute;
    border-radius: 50%;
    background-color: #65a3d9;
	z-index: -1;
}
.custom_imagearea{
	width: 66.41vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
    border-radius: 50%;
}
.custom_image{
	width: 66.41vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center;
}
.custom_image01{
	width: 25.03vw;
    height: 25.03vw;
	position: absolute;
    top: -22.76vw;
	bottom: 0;
	right: 0;
    left: -43.55vw;
    margin: auto;
}
.custom_image02{
	width: 22.03vw;
    height: 22.03vw;
	position: absolute;
    top: 27.24vw;
	bottom: 0;
	right: 0;
    left: -38.55vw;
    margin: auto;
}
.custom_image03{
	width: 21.03vw;
    height: 21.03vw;
	position: absolute;
    top: 28.24vw;
	bottom: 0;
	right: 0;
    left: 38.45vw;
    margin: auto;
}



/* main */

/* intro */
#intro{
	background-color: #F5F5F0;
}

/* contents */
#contents{
	background-color: #F5F5F0;
}
#contents .con_bg{
	background-image: url("./Dup/img/custom_bg.png");
	background-position: left;
	background-repeat: no-repeat;
	background-size: auto;
}

/* topcms */
#top_cms{
	background-color: #F5F5F0;
}

/* footer */


/* under page */

/* cms1 */

/* cms2 */

/* cms3 */

/* cms4 */

/* cms5 */

/* page7 */

/* page8 */

/* page9 */

/* page10 */


/* IE */
@media all and (-ms-high-contrast: none){
    .banner a{
        padding-bottom: 5px;
    }
    
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	#top_cms .cms_box:last-of-type{
		margin-bottom: 0;
		padding-bottom: 100px;
	}
	
	#custom .custom_box .custom_catch {
		width: 50vw;
		height: 50vw;
	}
	#custom .custom_box .custom_catch:before {
		width: 50vw;
		height: 50vw;
	}
	.custom_box .custom_circlearea {
		width: 80.41vw;
		height: 80.41vw;
	}
	.custom_box .custom_circle {
		width: 80.41vw;
		height: 80.41vw;
	}
	.custom_box .custom_circle01 {
		width: 3.96vw;
		height: 3.96vw;
		top: 66.28vw;
		left: 32.94vw;
	}
	.custom_box .custom_circle02 {
		width: 8.33vw;
		height: 8.33vw;
		top: 75.28vw;
		right: 45.33vw;
	}
	.custom_box .custom_circle03 {
		width: 15.31vw;
		height: 15.31vw;
		top: 9.64vw;
		right: 11.36vw;
	}
	.custom_box .custom_circle04 {
		width: 1.96vw;
		height: 1.96vw;
		top: 41.28vw;
		left: 67.94vw;
	}
	.custom_box .custom_circle05 {
		width: 3.33vw;
		height: 3.33vw;
		top: 43.28vw;
		right: 4.94vw;
		border-radius: 50%;
		background-color: #fff;
	}
	.custom_box .custom_circle06 {
		width: 6.31vw;
		height: 6.31vw;
		top: 47.28vw;
		right: -2.06vw;
	}
	.custom_imagearea {
		width: 100vw;
	}
	.custom_image{
		width: 100vw;
	}
	.custom_image01{
		width: 46.03vw;
		height: 46.03vw;
		top: -62.76vw;
		left: -50.55vw;
	}
	.custom_image02{
		width: 35.03vw;
		height: 35.03vw;
		top: 50.24vw;
		left: -60.55vw;
	}
	.custom_image03{
		width: 33.03vw;
		height: 33.03vw;
		top: 52.24vw;
		left: 49.45vw;
	}
	
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
	
	#custom .custom_box .custom_catch {
		width: 60vw;
		height: 60vw;
	}
	#custom .custom_box .custom_catch:before {
		width: 60vw;
		height: 60vw;
	}
	.custom_box .custom_circlearea {
		width: 90.41vw;
		height: 90.41vw;
	}
	.custom_box .custom_circle {
		width: 90.41vw;
		height: 90.41vw;
	}
	.custom_box .custom_circle01 {
		top: 77.28vw;
		left: 44.94vw;
	}
	.custom_box .custom_circle02 {
		top: 85.28vw;
		right: 42.33vw;
	}
	.custom_box .custom_circle03 {
		width: 21.31vw;
		height: 21.31vw;
		top: 2.64vw;
		right: 11.36vw;
	}
	.custom_box .custom_circle04 {
		width: 1.96vw;
		height: 1.96vw;
		top: 41.28vw;
		left: 77.94vw;
	}
	.custom_box .custom_circle05 {
		width: 3.33vw;
		height: 3.33vw;
		top: 43.28vw;
		right: 4.94vw;
		border-radius: 50%;
		background-color: #fff;
	}
	.custom_box .custom_circle06 {
		width: 6.31vw;
		height: 6.31vw;
		top: 47.28vw;
		right: -2.06vw;
	}
	.custom_image01{
		width: 57.03vw;
		height: 57.03vw;
		top: -81.76vw;
		left: -43.55vw;
	}
	.custom_image02{
		width: 43.03vw;
		height: 43.03vw;
		top: 81.24vw;
		left: -55.55vw;
	}
	.custom_image03{
		width: 40.03vw;
		height: 40.03vw;
		top: 57.24vw;
		left: 57.45vw;
	}
}


/*20210826公開後修正*/
.footer_right{
	position: relative;
}
.footer_right::before{
	content: "";
	background-image: url("./Dup/img/illust.png");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 300px;
	width: 300px;
	height: 300px;
	position: absolute;
	bottom: -30vh;
	right: 0;
}

/*20220112公開後修正*/
.footer_right::before{
	display: none;
}
.footer_illust{
    width: 100%;
    text-align: right;
    padding-top: 30px;
}
.footer_illust img{
    max-width: 300px;
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    .footer_illust {
        padding-top: 10px;
    }
    .footer_illust img{
        max-width: 230px;
    }
}



