﻿/* ---------------------- color */
/* メインカラー */
.txt_color1{color: #222} 
.bg_color1{background-color: #222} 
.border_color1{border-color: #222}
.hvr_txt_color1:hover{color: #222} 
.hvr_bg_color1:hover{background-color: #222} 
.hvr_border_color1:hover{border-color: #222}
/* サブカラー */
.txt_color2{color: #c0c0c0} 
.bg_color2{background-color: #c0c0c0} 
.border_color2{border-color: #c0c0c0}
.hvr_txt_color2:hover{color: #c0c0c0} 
.hvr_bg_color2:hover{background-color: #c0c0c0} 
.hvr_border_color2:hover{border-color: #c0c0c0}
/* アクセントカラー */
.txt_color3{color: #aaa} 
.bg_color3{background-color: #aaa} 
.border_color3{border-color: #aaa}
.hvr_txt_color3:hover{color: #aaa} 
.hvr_bg_color3:hover{background-color: #aaa} 
.hvr_border_color3:hover{border-color: #aaa}

.bg_color4 {
    background-color: #f2f2f2;
}
/* ---------------------- common */
body {
    font-family: 'Ubuntu','Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.font_com {
    font-family: 'Ubuntu','Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
h2,h3,.cate_title,.box_title1{
    font-weight: 700;
}

p::selection,
span::selection,
h2::selection,
h3::selection,
a::selection,
div::selection,
img::selection,
br::selection{
background:#222;
color: #fff;
}

p::-moz-selection {
background:#222;
color: #fff;
}

#wrap {
    overflow: hidden;
}
/* --- automatic link --- */
.linkStyle{color: #aaa}

.linkStyle:hover{
    text-decoration: underline;
}

/* ---------------------- header */
#pc_nav_fix {
    background-color: #222;
    padding: 20px 0px!important;
}
#logo{
    width: 80px;
}
/* ---------------------- nav */
#pc_nav_fix ul li a {
    color: #ffffff;
}
#header .menu_stick span {
    background-color: #fff;
}
/* ---------------------- footer */

#footer {
    background-color: #222;
    color: #fff;
}
#footer_nav li a {
    color: #fff;
}
#footer_nav li a:hover {
    color: #c0c0c0;
}
/* -------------------------- top ------------------------- */
#intro::before{
    content:'';
    position:absolute;
    height: 300px;
    width: 30%;
    background-image:url(Dup/img/pillars.png);
    background-size:contain;
    background-repeat:no-repeat;
    top:-50px;
    right:0;
    z-index: 2;
}
.fadein:before{
    transform: translateX(100px);
    transition: transform 1.5s ease, opacity 1.5s;
    opacity: 0;
}
.fadein.start:before{
    transform: translateX(0px);
    opacity: 1;
}

#top_contents .con_box .contents_no{
    color: #fff;
    left: 0px;
}

#top_contents .con_box .contents_no::before {
    position: absolute;
    content: "";
    background-color: #222;
    border-radius: 50%;
    display: block;
    width: 64px;
    height: 64px;
    color: #fff;
    z-index: -1;
    left: 12px;
    top: -12px;
}
#top_contents .contents_no span {
    background-color: #fff;
    width: 40px;
    height: 2px;
    transform: rotate(-45deg);
    left: 15px;
    top: -13px;
    bottom: 10px;
    margin: auto;
}
.gym_txt::before{
    content: "";
    display: block;
    background-image: url('Dup/img/gym.png');
    background-size: 994px 90px;
    background-repeat-y: no-repeat;
    animation: bgLoop 15s linear infinite;
    position: relative;
    height: 89px;
    width: 100%;
    /*transform: rotate(357deg);*/
    opacity: 0.5;
    top: -60px;
}
@keyframes bgLoop {
    0% { background-position: 0 0;}
  100% { background-position: -994px 0;}
}
#top_cms {
    padding: 0;
    margin-top: 250px;
}
.cms_box {
   padding: 40px 0 50px;
    margin-bottom: 50px;
}
.cms_box:nth-child(odd){
    background-color: #f2f2f2;
}
.cms_box:last-child{
    margin-bottom: 0;
    padding-bottom: 100px;
}
.cms_box:nth-child(odd)::before,
.cms_box:nth-child(odd)::after{
    content:'';
    position:absolute;
        height: 330px;
    width: 101%;
    background-image: url(Dup/img/naname.svg);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
}
.cms_box:nth-child(odd)::before{
    top: -100px;
}
.cms_box:nth-child(odd)::after{
    bottom: -92px;
    transform: rotate(180deg) rotateY(180deg);
}

.cms_box:nth-child(5)::after{
    display: none;
}

/* --- more --- */

/* -------------------------- sub ------------------------- */

/* ---------------------- cms1 */

/* ---------------------- cms2 */

/* ---------------------- cms3 */

/* ---------------------- cms4 */

/* ---------------------- cms5 */

/* ---------------------- info */

/* ---------------------- contact */

/* ---------------------- privacy policy */

/* ---------------------- sitemap */


/* ----------------------------------------------------------------------------------------------------------------------------
IE
--------------------------------------------------------- */
@media all and (-ms-high-contrast: none){
/* ---------------------- common */

/* ---------------------- header */

/* ---------------------- nav */

/* ---------------------- footer */



/* -------------------------- top ------------------------- */
:nth-child(2n+1).cms_box::before {
    top: -165px!important;
}

:nth-child(2n+1).cms_box::after {
    bottom: -165px!important;
}


/* --- more --- */

/* -------------------------- sub ------------------------- */

/* ---------------------- cms1 */

/* ---------------------- cms2 */
#cms_2-a .cate .cate_title {
    padding-top: 10px!important;
}

/* ---------------------- cms3 */

/* ---------------------- cms4 */

/* ---------------------- cms5 */

/* ---------------------- info */

/* ---------------------- contact */

/* ---------------------- privacy policy */
/*@media all and (-ms-high-contrast:none)*/
#page9 a {
    padding-top: 0px!important;
    padding-bottom: 2px!important;
}

/* ---------------------- sitemap */


}

/* ---------------------------------------------------------------------------------------------------------------------------- 
タブレット　
--------------------------------------------------------- */
@media screen and (max-width: 768px){
/* ---------------------- common */
 .linkStyle{
    text-decoration: underline;
}
 
 /* ---------------------- header */

/* ---------------------- nav */

/* ---------------------- footer */



/* -------------------------- top ------------------------- */
.gym_txt::before {
    background-size: 600px auto;
}
@keyframes bgLoop {
    0% { background-position: 0 0;}
  100% { background-position: -600px 0;}
}
.cms_box:nth-child(odd)::before, .cms_box:nth-child(odd)::after {
    height: 184px;
}
.cms_box:nth-child(odd)::before {
    top: -56px;
}
.cms_box:nth-child(odd)::after {
    bottom: -56px;
}
.cms_wrap {
    padding: 0 20px;
}
#intro {
    padding-top: 50px;
    padding-bottom: calc(60vw - 20px);
    padding-right: 20px;
    padding-left: 20px;
}
.intro_txt_wrap {
    width: 100%!important;
    padding: 50px 20px;
}
#intro .intro_img {
    width: 100%!important;
    height: 60vw;
    top: auto;
    bottom: 0;
}
#intro::before {
    height: 300px;
    width: 55%;
    top: -46px;
    opacity: 0.5;
    height: 120px;
    width: 55%;
    top: 30px;
    opacity: 0.5;
    background-position: bottom right;
}
/* --- more --- */

/* -------------------------- sub ------------------------- */

/* ---------------------- cms1 */

/* ---------------------- cms2 */

/* ---------------------- cms3 */

/* ---------------------- cms4 */

/* ---------------------- cms5 */

/* ---------------------- info */

/* ---------------------- contact */

/* ---------------------- privacy policy */

/* ---------------------- sitemap */

 
}

/* ----------------------------------------------------------------------------------------------------------------------------
スマホ　
--------------------------------------------------------- */
@media screen and (max-width: 667px){
/* ---------------------- common */
    
/* ---------------------- header */
#logo {
    width: 66px;
}
#pc_nav_fix {
    padding: 10px 0px!important;
}
/* ---------------------- nav */

/* ---------------------- footer */



/* -------------------------- top ------------------------- */
#intro::before {
    height: 120px;
    width: 63%;
    top: 0px;;
}

.cms_box:nth-child(odd)::before, 
.cms_box:nth-child(odd)::after {
    height: 165px;
    background-size: cover;
}
.cms_box:nth-child(odd)::before {
    top: -57px;
    background-position: bottom center;
}
.gym_txt::before {
    background-size: 400px auto;
    top: -80px;
}
@keyframes bgLoop {
    0% { background-position: 0 0;}
  100% { background-position: -400px 0;}
}
#top_cms {
    margin-top: 0px;
}
/* --- more --- */

/* -------------------------- sub ------------------------- */

/* ---------------------- cms1 */

/* ---------------------- cms2 */

/* ---------------------- cms3 */

/* ---------------------- cms4 */

/* ---------------------- cms5 */

/* ---------------------- info */

/* ---------------------- contact */
.tel_box,
.mail_box{
    padding: 30px 10px;
}
.mail_box a{
    font-size: 21px;
}
/* ---------------------- privacy policy */

/* ---------------------- sitemap */

	
}


/* 2022.03.07 */
/* YouTube */
.video_cms{
	padding-bottom: 57.25%;
	height: 0;
}