/* 1536 , 1530 × 735 ,1366 *//* 上記画面幅でも崩れていないか確認 */
@charset "utf-8";
/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
body {
     font-family: "Kaisei Opti", serif;
}
#header h1 img {
    max-width: 160px;
}
#pc_nav li a, #footer_nav li a {
    font-family: "Goblin One", "Kaisei Opti",serif;
    letter-spacing: -0.5px;
}
#pc_nav li a {
    color: var(--color1);
}
#pc_nav li a::after {
    background: var(--color1);
}
header.scr_header {
    background-color: var(--color4)!important;
}
#wrap {
    background: var(--color1);
}
footer .info_btn_wrap p a {
    background: var(--color2);
    color: var(--black);
}
#footer_info {
    background: var(--color4);
}
#footer_info .info_txt p {
    color: var(--black);
}
footer .scr {
    color: var(--color3);
    font-weight: bold;
}
.overlay .overlay-nav .bottom a {
    background: var(--color2);
    color: var(--black);
}
.overlay .overlay-nav .en ,.hgs {
    font-family: "Goblin One", "Kaisei Opti",serif!important;
}
#fix_bnr{
	bottom: 10px;
	right: 40px;
	z-index: 5;
	width: 400px;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
.info_txt {
    padding-top: 20px;
    padding-bottom: 20px;
}
#loading_logo {
    max-width: 250px;
    top: 45%;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#loading_logo {
    max-width: 160px;
}
footer .scroll {
    right: -19px;
}
#fix_bnr{
    width: 250px;
    right: 50%;
    transform: translateX(50%);
}

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#main_img {
    background: var(--color4);
    position: relative;
    overflow: hidden;
}
#main_img:before {
    content: "";
    background-image: url(../img/catch.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 15vw;
    right: 26vw;
    width: max(7vw, 100px);
    aspect-ratio: 1 / 3;
    z-index: 2;
}
.curve-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity: 0.8;
}
.curve-bg svg {
    position: absolute;
    left: 42vw;
    top: 95%;
    transform: translate(-50%, -50%) rotate(-12deg);
    width: max(127vw, 1600px);
    height: auto;
    opacity: 1;
}

.curve-text {
    fill: #fff;
    font-size: clamp(18px, 1.2vw, 42px);
    letter-spacing: .08em;
    font-family: "Kaisei Opti", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

.main_img_wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  top: 10%;
  left: -8%;
  position: relative; 
  z-index: 2; 
}
.product-slider {
    position: relative;
    width: max(60vw, 800px);
    aspect-ratio: 4 / 3;
}
.product-slider img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.product-slider img.is-active {
  opacity: 1;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

#main_img {
    height: 60vh !important;
}
#main_img:before {
    top: 15vw;
    right: 15vw;
    width: 11vw;
}
.product-slider {
    width: 100vw;
}
.curve-bg svg {
    left: 34vw;
    top: 64vw;
    width: 150vw;
}
.curve-text {
    font-size: 24px;
}


}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#main_img {
    height: 75vh !important;
}
    #main_img:before {
        background-image: url(../img/catch_sp.png);
        top: calc(62px + 1%);
        right: 14vw;
        width: 20vw;
    }
.curve-bg svg {
    left: 44vw;
    top: 68%;
    width: 170vw;
}
.main_img_wrap {
    top: 32%;
    left: -13%;
}
.product-slider {
    width: 120vw;
}
.curve-text {
        font-size: 30px;
    }
}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#intro .intro_right {
    background: #590016ed;
    z-index: 1;
}
#intro .intro_photo h2,.top_title h2.right,.top_title h2.left {
    font-family: "Goblin One", "Kaisei Opti",serif;
}
.top_title {
    filter: grayscale(1);
}
.blogListPattern_item a {
    color: #fff;
}
.top_cms_box h3 {
    margin-bottom: 10px;
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
.top_cms_box h3 {
    margin-bottom: 10px;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#contents .con_title {
        font-size: 21px;
}
.top_title h2 {
    font-size: 30px;
}
    .top_cms_box h3 {
    margin-bottom: 10px;
    font-size: 26px;
}
}

/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#page_title_img {
    background: url(../img/page_t.jpg);
    background-position-y: 50%;
    background-size: cover;
}
#page_title .en {
    text-shadow: 4px -4px 0px var(--color1);
}
#contact_tel a {
    color: #000;
}
#page8 #mail_contact li:before {
    color: rgb(255 255 255 / 70%)!important;
}
#tel_txt h3 {
    color: #fff;
}
#page10 .con_box {
    max-width: 1200px;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#page_title_img {
    background-position-x: 50%;
}
.blogListTitle.grid_9 {
    width: 70% !important;
}
.blogListDate.grid_3 {
    width: 30% !important;
}
#page10 .con_box li {
    line-height: 2;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#page_title_img {
    height: 280px;
        background-size: cover;
}
#page_title .en:before{
        width: 2px
}
#page_title .en {
    font-size: 26px;
    top: -15px;
    padding-left: 25px;
    text-shadow: 2px -2px 0px var(--color1);
}
#page_title .en:before {
    left: 8px;
}
#page_title .jp {
    left: -8px;
    top: 50px;
}
.blogListTitle.grid_9 {
    width: 100% !important;
}
.blogListDate.grid_3 {
    width: 100% !important;
}
#page10 .con_box li {
    line-height: 1.5;
}

}