@charset "UTF-8";

:root{
    --main-color: rgb(206, 185, 0);
    --sub-color: steelblue;
    --accent-color: gold;
    --bg-gradient: linear-gradient(-20deg, gold, khaki, whitesmoke, khaki, gold, khaki, whitesmoke, khaki);
}

@font-face {
  font-family: "EduSABeginner";
  src: url("myfonts/EduSABeginner/EduSABeginner-Bold.woff2") format("woff2"),
       url("myfonts/EduSABeginner/EduSABeginner-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kosugi";
  src: url("myfonts/Kosugi/Kosugi-Regular.woff2") format("woff2"),
       url("myfonts/Kosugi/Kosugi-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/****************************************
  ベース設定
****************************************/
/* トップスライドと下のコンテンツの余白を無くす */
.site-body{
    padding-top: 0;
}
/* ナビゲーションボタン */
.device-mobile .global-nav-list>li .global-nav-name{
    font-size: 16px;
}

/****************************************
  ページヘッダー
****************************************/
.page-header, .page-header *{
    all: initial;
    display: block;
}
.page-header{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    background-image: url(https://daiken-group.jp/wp/wp-content/uploads/slide_pc_03.jpg);
    background-size: cover;
}
.page-header .page-header-title{
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: #444;
}
.page-header .page-header-title:after{
    content: "";
    display: block;
    width: 50px;
    height: 6px;
    background-color: khaki;
    border-radius: 10px;
    margin: 10px auto;
}
@media (max-width:480px){
    .page-header{
        height: 80px;
    }
    .page-header .page-header-title{
        font-size: 24px
    }
}

/****************************************
    フッター
****************************************/
.site-footer{
    background-image: url(/wp/wp-content/uploads/wall_emboss_2.jpg);
    background-position: top;
    background-size: cover;
}


/****************************************
  トップページのh2設定
****************************************/
@font-face {
  font-family: "PlayfairDisplay";
  src: url("myfonts/PlayfairDisplay/PlayfairDisplay-Medium.woff2") format("woff2"),
       url("myfonts/PlayfairDisplay/PlayfairDisplay-Medium.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ZenAntique";
  src: url("myfonts/ZenAntique/ZenAntique-Regular.woff2") format("woff2"),
       url("myfonts/ZenAntique/ZenAntique-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
h2.top, h2.top *{ all: initial; display: block; }
h2.top{
    margin: 1.5em auto;
    font-family: "ZenAntique";
    font-size: 2em;
}
h2.top:before{
    content: attr(data-label);
    display: block;
    border-bottom: 1px solid rgb(206, 185, 0);
    font-family: "PlayfairDisplay";
    font-size: 14px;
    color: #333;
}

/****************************************
  トップページのみヘッダーを透明にしてロゴとスライドを一体化
****************************************/
@media (max-width:767px){
    body.home #site-header{
        position: absolute;
        background-color: transparent;
    }
    body.home .ltg-slide-text-set.mini-content{
        top: 48%;
    }
}


/****************************************
  目次
/****************************************
/* 初期設定 */
:root{
    --mokuji-bg-color: whitesmoke;
    --mokuji-title: maroon;
    --mokuji-link: dodgerblue;
}
.mokuji, .mokuji *{
    margin: 0;
    padding: 0;
    user-select: none;
    font-size: 16px;
    transition: 0.3s;
}
.mokuji li{
    display: list-item;
    color: var(--mokuji-link); 
    cursor: pointer;
}

/* 本体設定 */
.mokuji{
    background-color: var(--mokuji-bg-color);
    width: fit-content;
    min-width: 260px;
    max-width: 560px;
    margin: 1em auto;
    padding: 1em;
    box-sizing: border-box;
    color: var(--mokuji-link);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.mokuji .title{
    cursor: pointer;
    color: var(--mokuji-title);
}
.mokuji .title:after{
    content: "▲";
    margin-left: 10px;
}
.mokuji > ul{
    margin: 8px auto auto 2em;
    list-style-type: disc;
}
.mokuji ul ul{
    margin: 0 auto auto 1em;
    list-style-type: circle;
}
.mokuji.hyde{
    min-width: 0px !important;
}
.mokuji.hyde .title:after{
    content: "▼";
}
.mokuji.hyde > ul{
    height: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    overflow: hidden !important;
}

/*****************************************
 アコーデオンメニュー
*****************************************/
.bt_accordion, .bt_accordion *{ cursor: pointer; user-select: none; }
.bt_accordion{ position: relative; }
.bt_accordion .btOpenClose{
    position: absolute;
    top: 50%; right: 15px;
    transform: translateY(-50%);
    display: block;
    width: 22px;
    aspect-ratio: 1 / 1;
}
.bt_accordion .btOpenClose div{
    position: absolute;
    top: 50%; right: 50%;
    width: 20px; height: 3px;
    background-color: maroon;
    transition: 0.5s;
}
.bt_accordion .btOpenClose div:nth-child(1){
    transform: translateY(-50%) rotate(0deg);
}
.bt_accordion .btOpenClose div:nth-child(2){
    transform: translateY(-50%) rotate(90deg);
}
.bt_accordion.acopen .btOpenClose div:nth-child(1){
    transform: translateY(-50%) rotate(135deg);
}
.bt_accordion.acopen .btOpenClose div:nth-child(2){
    transform: translateY(-50%) rotate(225deg);
}

.bt_accordion + .accordion{
    transition: 0.5s;
    overflow: hidden;
    margin-bottom: 2em;
}
.bt_accordion + .accordion.hyde{
    height: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}


/****************************************
  トップページ　お知らせ
****************************************/

.news *{
    all: initial;
    display: block;
    width: 100%;
    max-width: 757px;
    margin: auto;
}
.news{
    position: relative;
    
}
.news .news_wrap{
    margin: 1em auto;
    width: 100%;
    max-height: 60vh;
    padding: 1em;
    box-sizing: border-box;
    overflow: auto;
    transition: 0.3s;
    background-color: white;
}
.news .news_wrap.hyde{
    max-height: 25vh;
}
@media (max-width: 560px){
    .news .news_wrap{
        max-height: 80vh;
    }
    .news .news_wrap.hyde{
        max-height: 40vh;
    }
}
.news .news_wrap li{
    width: 100%;
    border-bottom: 1px solid #AAA;
    padding-bottom: 0.3em;
    margin-bottom: 1em;
}
.news .news_wrap li time{
    color: var(--sub-color);
    user-select: none;
}
.news .news_wrap li .caption{
    /* margin-left: 1em; */
    user-select: none;
}
.news .news_wrap li.into_content time,
.news .news_wrap li.into_content .caption{
    cursor: pointer;
}
.news .news_wrap li.into_content time .open_bt{
    position: relative;
    display: block;
    float: right;
    width: 30px;
    aspect-ratio: 1 / 1;
    margin-top: 5px;
    margin-right: 10px;
    cursor: pointer;
    transform-origin: center;
}
.news .news_wrap li.into_content time .open_bt.open:after{
    transform: translate(-50%, -50%) rotate(180deg);
}
.news .news_wrap li.into_content time .open_bt:before,
.news .news_wrap li.into_content time .open_bt:after{
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 80%;
    height: 2px;
    background-color: var(--main-color);
    transition: 0.3s;
}
.news .news_wrap li.into_content time .open_bt:before{
    transform: translate(-50%, -50%) rotate(0deg);
}
.news .news_wrap li.into_content time .open_bt:after{
    transform: translate(-50%, -50%) rotate(90deg);
}

.news .news_wrap li .caption a{
    color: var(--main-color);
    text-decoration: underline;
    cursor: pointer;
}
.news .news_wrap li .content{
    padding: 0.5em auto 0.5em 1em;
    box-sizing: border-box;
    overflow: hidden;
    transition: 0.3s;
}
.news .news_wrap li .content.hyde{
    height: 0px !important;
}
#more_view{
    position: relative;
    top: -60px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    margin: auto;
    min-height: 50px;
    margin-top: 0px;
    text-align: center;
    background: linear-gradient(to bottom, transparent 0%, transparent 30%, white 100%);
    color: var(--main-color);
    font-weight: bold;
    cursor: pointer;
}

.news .news_wrap li .content *{
    all: initial;
    box-sizing: border-box;
    margin-top: 10px;
    margin-left: 1em;
}
.news .news_wrap li .content p{
    display: block;
}
.news .news_wrap li .content a{
    text-decoration: underline;
    display: inline;
    color: var(--main-color);
    cursor: pointer;
}
.news .news_wrap li .content ul{
    display: block;
    box-sizing: border-box;
}
.news .news_wrap li .content ul li{
    display: block;
    text-indent: -1em;
    margin-left: 2em;
    margin-top: 0px;
}
.news .news_wrap li .content ul li:before{
    content: '●';
}

/****************************************
  トップページ　事業内容
****************************************/
.solutions, .solutions *{
    all: initial;
    display: block;
}
.solutions{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    width: 100%;
    font-size: 16px;
}
.solution .eyecatch{
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}
.solution .eyecatch img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.solution .eyecatch:after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0) 60%,
        rgba(255,255,255,0.8) 100%
    );
    pointer-events: none; /* クリックを邪魔しない */
}
.solution .caption{
    position: relative;
    top: -2em;
    width: 90%;
    margin: auto 0 auto auto;
    padding: 1em;
    box-sizing: border-box;
    background-color: white;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.solution .caption h4{
    display: flex;
    flex-direction: column;
    justify-content: start;
    border-bottom: 2px solid rgb(206, 185, 0);
    margin-bottom: 0.5em;
    padding: 5px;
    box-sizing: border-box;
    color: #333;
    font-family: "Kosugi", sans-serif;
    font-size: 1.3em;
    font-weight: bold;
}
.solution .caption h4:before{
    display: inline;
    content: attr(data-label);
    font-size: 0.8em;
    font-family: "ZenAntique", cursive;
    color: #555;
    font-weight: normal;
}
@media (max-width:991px){
    .solutions{
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width:767px){
    .solutions{
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 1em auto;
    }
}
@media (max-width:479px){
    .solution .eyecatch{
        aspect-ratio: 4 / 3;
    }
    .solution .caption{
        top: -3em;
    }
}


/****************************************
  当社の強み
****************************************/
.carousel,
.carousel * {
  all: initial;
  display: block;
  user-select: none;
}
.carousel {
    position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  font-size: 16px;
  overflow: hidden;
}
@media (max-width: 767px){ .carousel{ font-size: 16px; } }
@media (max-width: 480px){ .carousel{ font-size: 14px; } }

.carousel_block {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 90%;
  max-width: 560px;
  /* margin: auto; */
  pointer-events: none;
}
.carousel_block:first-child {
    position: relative;
}
.carousel_block .caption,
.carousel_block img,
.carousel_block .text {
  transition: 0.5s;
}
.carousel_block .caption {
  position: absolute;
  top: 0px;
  left: -120vw;
  width: 100%;
  max-width: fit-content;
  min-width: 50%;
  padding: 20px 30px 20px 30px;
  background: var(--bg-gradient);
  color: #333;
  border: 4px ridge khaki;
  font-size: 1.3em;
  font-weight: bold;
  /* clip-path: polygon(
    0 0,
    calc(100% - 20px) 0,
    100% 50%,
    calc(100% - 20px) 100%,
    0 100%
  ); */
}
@media (max-width: 600px) {
  .carousel_block .caption {
    padding: 20px 30px 20px 20px;
  }
}
@media (max-width: 480px) {
  .carousel_block .caption {
    padding: 10px 30px 10px 20px;
  }
}
.carousel_block img {
  width: 90%;
  aspect-ratio: 16 / 9;
  margin: 30px auto 0px auto;
  object-fit: cover;
  overflow: hidden;
  opacity: 0;
}
.carousel_block .text {
  position: relative;
  top: -1em;
  right: -120vw;
  width: 80%;
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%);
  margin-right: 0;
  margin-left: auto;
  padding: 1em 1em 1em 40px;
  background-color: linen;
  color: #004477;
}
.carousel_block .text .bt_next {
  position: relative;
  background-color: steelblue;
  width: fit-content;
  margin: auto 0 auto auto;
  padding: 5px 10px;
  color: white;
  cursor: pointer;
}

.carousel_block.show {
  pointer-events: auto;
}
.carousel_block.show .caption {
  animation: caption_show 1s 0s forwards;
}
.carousel_block.show img {
  opacity: 1;
}
.carousel_block.show .text {
  animation: text_show 1s 0s forwards;
}

@keyframes caption_show {
    0%{ left: -120vw; }
    100%{ left: 0vw; }
}
@keyframes caption_hyde {
    0%{ left: 0vw; }
    100%{ left: -120vw; }
}
@keyframes text_show {
    0%{ right: -120vw; }
    100%{ right: 0vw; }
}
@keyframes text_hyde {
    0%{ right: 0vw; }
    100%{ right: -120vw; }
}


/****************************************
  DAIKENが選ばれる理由（円環デザイン）
****************************************/
.circle, .circle *{
    margin: 0;
    padding: 0;
}

.circle{
    position: relative;
    transform-origin: center center;
    max-width: 930px;
    /*min-height: 533px; /* 円環が収まる最低高さ */
    aspect-ratio: 16 / 9;
    margin: 20px auto;
    font-size: 16px;
}
/* @media (max-width: 1199px){ .circle{ width: 930px; transform: scale(0.9); } } */
/* @media (max-width:  991px){ .circle{ width: 690px; transform: scale(0.7); } } */
/* @media (max-width:  767px){ .circle{ width: 510px; transform: scale(1.0); } } */

.circle .bg_enkan{
    display: block;
    width: 90%;
    max-width: 800px;
    margin: 0px auto;
}

.circle .wrap{
    all: initial;
    position: absolute;
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    width: fit-content;
    align-items: center;
    user-select: none;
    cursor: pointer;
    background-color: transparent;
}
.circle .small{ grid-column: 1 / 3; grid-row: 1 / 2; }
.circle .icons{ grid-column: 1 / 2; grid-row: 2 / 4; align-self: stretch;}
.circle .big{ grid-column: 2 / 3; grid-row: 2 / 3; }
.circle .more{ grid-column: 2 / 3; grid-row: 3 / 4; }

.circle .small{
    font-size: 1em;
    color: firebrick;
    text-shadow: 0px 0px 10px white,0px 0px 10px white,0px 0px 10px white,0px 0px 10px white,0px 0px 10px white,0px 0px 10px white,0px 0px 10px white,0px 0px 10px white,0px 0px 10px white,0px 0px 10px white,0px 0px 10px white,0px 0px 10px white;
}
.circle .icons{
    display: block;
    width: 100%;
    height: 100%;
    max-height: 70px;
    aspect-ratio: 16 / 9;
    object-fit: contain; /* or cover */
    /* transform: scale(1.2); */
}
.circle .big{
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2),0px 0px 10px white,0px 0px 10px white,0px 0px 10px white,0px 0px 10px white,0px 0px 10px white,0px 0px 10px white,0px 0px 10px white,0px 0px 10px white,0px 0px 10px white,0px 0px 10px white,0px 0px 10px white,0px 0px 10px white;
}
.circle .more{
    width: fit-content;
    padding: 0px 5px 2px 5px;
    background-color: dodgerblue;
    /* border: 2px solid dodgerblue; */
    border-radius: 4px;
    color: white;
}
.circle .wrap .content{
    display: none;
}

.circle .wrap:nth-child(2){ top: 100px; left: 150px; }
.circle .wrap:nth-child(3){ top: 50px; left: 450px; }
.circle .wrap:nth-child(4){ top: 160px; left: 650px; }
.circle .wrap:nth-child(5){ top: 320px; left: 600px; }
.circle .wrap:nth-child(6){ top: 380px; left: 300px; }
.circle .wrap:nth-child(7){ top: 260px; left: 50px; }

@media (max-width:  991px){

    .circle .wrap{
        width: 240px;
    }

    .circle .small{font-size: 0.9em;}
    .circle .big{font-size: 18px;}
    .circle .more{font-size: 0.9em;}

    .circle .wrap:nth-child(2){ top: 60px; left: 160px; }
    .circle .wrap:nth-child(3){ top: 45px; left: 400px; }
    .circle .wrap:nth-child(4){ top: 160px; left: 500px; }
    .circle .wrap:nth-child(5){ top: 260px; left: 350px; }
    .circle .wrap:nth-child(6){ top: 300px; left: 100px; }
    .circle .wrap:nth-child(7){ top: 180px; left: 20px; }
}

@media (max-width:  767px){
    .circle{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .circle .bg_enkan{ display: none; }
    .circle .wrap{
        position: static;
        width: auto;
        padding: 0px 10px 5px 10px;
        box-sizing: border-box;
        border-radius: 5px;
        box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    }
}
@media (max-width:  575px){
    .circle{
        aspect-ratio: auto;
        grid-template-columns: 1fr;
        max-width: 240px;
    }
}

.circle .show{
    position: fixed;
    top: 0px; left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: 0.3s;
    z-index: 9999;
}
.circle .show.fade_in{
    opacity: 1;
}
.circle .show.fade_out{
    opacity: 0;
}
.circle .show .white_area{
    position: relative;
    width: 95%; height: auto;
    max-height: calc(100% - 80px);
    max-width: 600px;
    margin: 10px auto;
    padding: 1em;
    box-sizing: border-box;
    background-color: white;
    border-radius: 10px;
    /* overflow-y: scroll; */
}

@media (max-width: 480px){
    .circle .show .white_area{
        position: relative;
        top: auto; left: auto;
        transform: translate(0,0);
        max-height: calc(100% - 80px);
    }
}

.circle .show .caption{
    margin: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.circle .show .sub_title{
    width: 100%;
    text-align: center;
    color: firebrick;
}
.circle .show .imgs{
    display: block;
    width: 100%; height: 100%;
    max-width: 100px;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    float: left;
    margin: 0;
}
.circle .show .title{
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.circle .show #bt_close{
    position: absolute;
    top: -10px;
    right: -10px;
    display: block;
    width: 36px;
    aspect-ratio: 1 / 1;
    margin: auto;
    background-color: black;
    border-radius: 50%;
    user-select: none;
    cursor: pointer;
}
.circle .show #bt_close:before,
.circle .show #bt_close:after{
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform-origin: center;
    display: block;
    width: 70%;
    height: 4px;
    background-color: white;
    border-radius: 5px;
}
@media (max-width: 480px){

    .circle .show #bt_close{
        position: fixed;
        top:auto;
        bottom: -40px;
        right: calc(50% - 16px);
    }
}
.circle .show #bt_close:before{ transform: translate(-50%,-50%) rotate(-45deg); }
.circle .show #bt_close:after{ transform: translate(-50%,-50%) rotate(45deg); }



/******************************************
    会社概要：会社情報
*******************************************/
dl.info {
    max-width: 720px;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
  }
  dl.info dt,
  dl.info dd {
    box-sizing: border-box;
    border-top: 1px solid darkgray;
  }
  dl.info dt {
    width: 160px;
    margin: 5px 20px 5px 0px;
    padding: 5px 0px 0px 5px;
    text-align: right;
    font-weight: bold;
  }
  
  dl.info dd {
    width: calc(100% - 180px);
    margin: 5px 0px;
    padding: 5px 0px 0px 0px;
  }
  
  @media screen and (max-width: 480px) {
  
    dl.info dt,
    dl.info dd {
      width: 100%;
      text-align: center;
      margin: 0px 0px;
    }
    dl.info dt{
        color: #555;
    }
    dl.info dd {
      border-top: none;
      margin-bottom: 5px;
      margin-left: 0px;
    }
  }
  

/******************************************
    会社概要：アクセス
*******************************************/
  #access{
    width: 100%;
    max-width: 780px;
    height: 100vh;
    max-height: 320px;
    margin: 30px auto;
  }
  #access iframe {
    width: 100%;
    height: 100%;
  }