@charset "UTF-8";
/* #region サイト全体、共通設定 */

html {
    scroll-behavior: smooth;
}

/* h1タグで白文字のタイトル ★★★ */

.slogan__title, .products__title {
    color: #fff;
    text-shadow: 0 1px 4px rgb(0 0 0 / 70%);
    font-size: 2.2rem;
    font-weight: bold;
}

/* 白の横線 ★★★ */

.slogan__line, .products__line {
    width: 100%;
    max-width: 360px;
    height: 3px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    margin: 30px auto;
}

/* 灰色ボタンリンク ★★★ */

.title__button, .contact__mail__button {
    display: block;
    width: 200px;
    /*ボタンの装飾関連*/
    border-radius: 100px;
    box-shadow: 0 1px 4px rgb(0 0 0 / 25%), 0 0 16px rgb(0 0 0 / 12%);
    transition: box-shadow 0.2s ease-out, color 0.2s ease-out;
    background-image: linear-gradient(to bottom, #fff, #e8e8e8);
    /*テキスト関連*/
    color: black;
    text-align: center;
    line-height: 44px;
    font-size: 0.8rem;
    font-weight: bold;
    text-shadow: 0 1px #fff;
}

.title__button:hover, .contact__mail__button:hover {
    background-image: linear-gradient(to bottom, #fff, #eee);
    box-shadow: 0 1px 4px rgb(0 0 0 / 35%), 0 0 18px rgb(0 0 0 / 25%);
    background-repeat: repeat-x;
    text-decoration-line: none;
    color: black;
}

.contact__line, .history__line {
    width: 100%;
    max-width: 360px;
    height: 1px;
    background-color: rgb(200, 190, 223);
    margin: 30px auto 50px;
}

/* #endregion */

/* #region ナビゲーション */

#nav__bar__button {
    display: none;
}

.navSub__link__invalid {
    pointer-events: none;
    cursor: pointer;
}

@media screen and (max-width:767px) {
    /*　画面サイズが767px以下の場合　*/
    #nav {
        position: fixed;
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        padding: 0;
        z-index: 100;
    }
    .nav__bar__label {
        width: 46px;
        height: 34px;
        background-color: rgba(114, 114, 114, 0.9);
        color: #fff;
        text-align: center;
        border-radius: 3px;
        cursor: pointer;
        padding: 9px;
        margin: 5px;
    }

    .nav__bar__label > i {
        display: block;
    }

    .nav__buttons {
        width: 0px;
        height: 100vh;
        background-color: rgb(238, 238, 238);
        transition: 0.5s;
        overflow: hidden;
        visibility: hidden;
        white-space: nowrap;
    }
    #nav__bar__button:checked~#nav .nav__buttons {
        width: 180px;
        transition: width 0.5s;
        visibility: visible;
        border-right: 1px solid #ccc;
        box-shadow: 0 0 5px rgb(0 0 0 / 15%);
    }
    .nav__link, .nav__link-f {
        display: block;
        font-size: 1.1rem;
        color: #666666;
        font-weight: 300;
        text-decoration-line: none;
        padding: 13px;
        border-bottom: 1px solid #ccc;
    }
    .nav__link:hover, .nav__link-f:hover {
        color: #666666;
        text-decoration-line: none;
    }
    .nav__button-active {
        background: white;
        box-shadow: 5px 0 0 0 #ccc inset;
    }
}

@media screen and (min-width:768px) {
    /*　画面サイズが768px以上の場合　*/
    .nav__bar__label, .nav__text {
        display: none;
    }
    #nav {
        position: fixed;
        z-index: 100;
        background-color: #FFF5;
        border-bottom: 1px solid #DDD5;
        width: 100%;
    }
    .nav__buttons {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .nav__button {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
    }
    .nav__link {
        display: block;
        margin: 14px;
        width: 12px;
        height: 12px;
        /*ボタンの装飾関連*/
        background-color: #c8c8c8;
        background-repeat: repeat-x;
        background-image: linear-gradient(to bottom, #eee, #c8c8c8);
        border-radius: 100px;
        box-shadow: 0 1px 3px rgb(0 0 0 / 40%);
        transition: 0.1s ease;
    }
    .nav__link:hover, .nav__button-active>.nav__link {
        background-color: #ddd;
        background-repeat: repeat-x;
        background-image: linear-gradient(to bottom, #fdfdfd, #ddd);
        width: 20px;
        height: 20px;
        margin: 10px;
        text-decoration: none;
        border-radius: 100px;
        box-shadow: 0 1px 3px rgb(0 0 0 / 40%);
    }
    .nav__link:hover>.nav__text {
        display: block;
        position: absolute;
        bottom: -25px;
        color: #fff;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
        padding: 4px 8px;
        font-weight: bold;
        text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
        font-size: 1.0rem;
    }
    .nav__link-f:hover>.nav__text {
        display: block;
        position: absolute;
        bottom: -36px;
        color: #fff;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
        padding: 4px 8px;
        font-weight: bold;
        text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
        font-size: 1.0rem;
    }

    .nav__link__icon {
        display: block;
        pointer-events: none;
        cursor: pointer;
        color: #b5b4ff;
        font-size: 1.4rem;
        transform: matrix(1.05, 0, 0, 1.05, 0, 0);
    }
    .nav__link-f {
        box-shadow: 0 1px 3px rgb(0 0 0 / 40%);
        border-radius: 50%;
        transform: matrix(0.7, 0, 0, 0.7, 0, 0);
        background-color: #ffffffc4;
    }
    .nav__link-f:hover {
        display: block;
        text-decoration: none;
        transform: matrix(1.1, 0, 0, 1.1, 0, 0);
        transition: 0.1s ease;
    }
    .nav__link-f:hover>.nav__link__icon {
        color: #8c8bef;
    }
}

/* 右下のナビボタン */

@media screen and (max-width:767px) {
    /*　画面サイズが767px以下の場合　*/
    .navSub {
        display: none;
    }
}

@media screen and (min-width:768px) {
    /*　画面サイズが768px以上の場合　*/
    .navSub {
        display: flex;
        flex-direction: column;
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 100;
        height: 66px;
        justify-content: space-between;
    }
    .navSub__button {
        width: 30px;
        height: 30px;
        background-color: rgb(34, 34, 34);
        border-radius: 2px;
        opacity: 1;
        visibility: visible;
        transition: all 0.5s;
        border: 1px solid #DDD5;
    }
    .navSub__button-hide {
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s;
    }
    .navSub__button:hover {
        background-color: #383838;
    }
    .navSub__icon {
        padding: 7px 10px;
        color: white;
    }
}

/* #endregion */

/* #region 動画背景 （youtube）*/

#header{
	position: fixed;/*ローディング画像などを表示す際の基点とするため指定*/
    height: 100vh;/*高さを全画面にあわせる*/
    text-align: center;
    color: #fff;
    /*ローディング画面時＆動画が表示されないときに表示する背景画像のレスポンシブ化*/
    background: url("../img/bg.png") no-repeat;
    background-size: cover;
    z-index: -99;

}

/* ローディングアイコン設定 */

#loading {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    font-weight: bold;
}

/*jQueryで付与されたdisappearクラスがついたらロゴエリアを非表示*/

#loading.disappear{
     display: none;   
}


/* youtube設定 */

#youtube-area{
    position: fixed;
    z-index: -100;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
 	opacity: 0;    
}

/*jQueryで付与されたappearクラスがついたらYoutubeエリアをふわっと表示*/
#youtube-area.appear {
	animation-name:PageAnimeAppear;
	animation-duration:.5s;
	animation-fill-mode:forwards;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

#youtube {
/*天地中央配置*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*縦横幅指定*/
  width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
  z-index: -97;
}

/*youtubeがクリックされないためのマスク*/
#youtube-mask{
    position: absolute;
    z-index: -98;/*下から2番目に表示*/
    top:0;
    width:100%;
    height: 100%;
}


/* #endregion */

/* #region タイトル ★★★ */

#title {
    min-height: 100vh;
    background: linear-gradient(
        -45deg, rgb(255 255 255 / 85%),rgb(248 248 248 / 75%));
}


.title__logo {
    height: 383px;
    position: relative;
    z-index: 2;
}

.title__img {
    max-width: 100%;
    width: 436px;
}

/* #endregion */

/* #region 企業理念 ★★★ */

#slogan {
    min-height: 100vh;
    background-size: cover;
    background-color: #FFF;
    background-image: radial-gradient(circle, rgba(109, 209, 245, 0) 60%, rgba(199, 221, 227, 0.79) 89%, rgba(79, 91, 93, 0.85)), linear-gradient(153deg, rgba(195, 187, 204, 0.49) 19%, rgba(169, 220, 238, 0.72) 61%), radial-gradient(circle at 76% 100%, rgba(35, 90, 110, 1) 16%, rgba(195, 187, 204, 0.49) 59%);
}

.slogan__text {
    color: #fff;
    text-shadow: 0 1px 4px rgb(0 0 0 / 70%);
    font-size: 2.2rem;
    font-weight: bold;
    text-align: center;
    padding-right: 5%;
    padding-left: 5%;
}

.slogan__text-2 {
    font-size: 1rem;
    padding-right: 20%;
    padding-left: 20%;
    color: #fff;
    text-shadow: 0 1px 4px rgb(84 84 84 / 70%);
    line-height: 1.4;
    text-align: center;
}

/* #endregion */

/* #region 沿革 */

#history {
    min-height: 100vh;
    background: linear-gradient( 
        -45deg, rgb(0 0 0 / 85%),rgb(0 0 0 / 55%));
}

.history__title {
    color: rgb(235, 230, 245);
    font-size: 1.7rem;
}

.history__item {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(202, 197, 213);
    background-color: rgb(235, 230, 245);
    border-radius: 5px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 20%);
    text-align: center;
    box-sizing: border-box;
}

.history__item__date {
    font-size: 1.0rem;
    color: rgb(75, 75, 75);
    text-shadow: 0 1px #fff;
    text-align: left;
}

.history__item__line {
    border-top: 1px dotted rgb(235, 230, 245);
}

.history__item__text-1 {
    font-size: 1.2rem;
    color: #545258;
    text-shadow: 0 1px #fff;
    font-weight: 600;
    line-height: 1.6;
    text-align: left;
}

.history__item__text-2 {
    font-size: 1.0rem;
    color: rgb(145, 145, 145);
    text-align: left;
    font-weight: 400;
    line-height: 1.4;
}

/* #endregion */

/* #region 私達に出来ること ★★★ */

#products {
    min-height: 100vh;
    /*背景の設定*/
    background-position: center;
    background-size: cover;
    background-color: #FFF;
    background-image: radial-gradient(circle, rgba(109, 209, 245, 0) 60%, rgba(199, 221, 227, 0.79) 89%, rgba(79, 91, 93, 0.85)), linear-gradient(153deg, rgba(195, 187, 204, 0.49) 19%, rgba(169, 220, 238, 0.72) 61%), radial-gradient(circle at 76% 100%, rgba(35, 90, 110, 1) 16%, rgba(195, 187, 204, 0.49) 59%);
}

@media screen and (max-width:767px) {
    /*　画面サイズが767px以下の場合　*/
    #products {
        height: initial;
        padding: 50px 0;
    }
}

.products__item__box {
    padding: 0 10px;
}

.products__item {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /*箱の白色罫線*/
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 40%);
    /*テキストの設定*/
    color: #fff;
    font-weight: bold;
    text-shadow: 0 1px 1px rgb(0 0 0 / 40%);
    text-align: center;
    overflow-wrap: break-word;
    padding: 30px 15px;
}

.products__item__text {
    display: block;
    line-height: 1.4em;
    margin-bottom: 20px;
    font-size: 1.6rem;
}

.products__item__star {
    font-size: 1.8rem;
}

/* #endregion */

/* #region お問い合わせ */

#contact {
    min-height: 100vh;
    background: linear-gradient(
        -45deg, rgb(255 255 255 / 85%),rgb(248 248 248 / 75%));

}

.contact__title {
    font-size: 1.7rem;
    color: #666072;
    font-weight: 500;
    margin-bottom: 20px;
}

.contact__title__text {
    color: #1d1926;
    font-size: 1.2rem;
    font-weight: 600;
    text-shadow: 0 1px 0 rgb(255 255 255 / 75%);
    line-height: 1.4;
    text-align: center;
}

.contact__information {
    text-align: center;
}

@media screen and (max-width:767px) {
    /*　画面サイズが767px以下の場合　*/
    .contact__information {
        padding: 0;
    }
}

.contact__address__type {
    font-size: 1.7rem;
    color: #fff;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 40%);
    background-color: rgb(139, 135, 149);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 20%);
}

.contact__address__text {
    font-size: 1.4rem;
    background-color: rgb(233, 229, 242);
    color: #545258;
    text-shadow: 0 1px #fff;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 20%);
    line-height: 1.6;
}

/* #endregion */

/* #region footer */

#footer {
    background-color: rgb(40, 38, 45);
    height: 20vh;
    min-height: 64px;
}

.copyright {
    color: #a498bf;
    font-size: 0.8rem;
    font-weight: bold;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 40%);
    text-align: center;
}

/* #endregion */