@charset "UTF-8";
.flex {
  display: flex;
  justify-content: center; /*ヨコ中央*/
  align-items: center; /*タテ中央*/
}
.flex_h {
  display: flex;
  align-items: center; /*タテ中央*/
}
.flex_w {
  display: flex;
  justify-content: center; /*ヨコ中央*/
}
.wh {
  background-color: #FFFFFF;
}
.gl {
  background-color: #e1dec6;
}
.alpha {
  background-color: rgba(255,255,255,0.00);
}
/****************************************
PC用
*****************************************/
@media screen and (min-width: 481px) {
  /****************************************
トップスライド
*****************************************/
  #topmovie {
    position: relative; /*h1の中央寄せ配置の起点とするためのrelative*/
    height: 100vh; /* 変数をサポートしていないブラウザのフォールバック */
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    width: 100vw;
  }
  .text_mov_area {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
  }
  .topcopy {
    color: #FFF;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-size: calc(2.8vh);
    letter-spacing: calc(0.1em);
    line-height: calc(2em);
    position: absolute;
    top: 0%;
    left: 0%;
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    width: calc(100vw);
    height: calc(100vh);
    text-orientation: upright;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-variant-east-asian: full-width;
    -moz-font-feature-settings: "fwid";
    -webkit-font-feature-settings: "fwid";
    font-feature-settings: "fwid";
    z-index: 10;
  }
  .copy {
position: absolute;
  }

  #video-area {
    position: fixed;
    z-index: -1; /*最背面に設定*/
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
  }
  #video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    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%;
  }
  a.movply, a.mov50th {
    position: absolute;
    width: calc(auto);
    min-width: calc(15%);
    height: calc(1em);
    bottom: 2.5%;
    color: #FFF;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.50);
    padding-top: calc(1em);
    padding-right: calc(1em);
    padding-bottom: calc(1em);
    padding-left: calc(1.5em);
    font-size: calc(1.5em);
    line-height: calc(1em);
    text-align: center;
    vertical-align: text-bottom;
    letter-spacing: calc(0.1em);
    background-color: hsla(19, 33%, 17%, 0.80);
    mix-blend-mode: multiply;
    border-radius: 1px;
  }
  a.movply {
    left: 2%;
  }
  a.mov50th {
    left: 21%;
  }
  .movply img, .mov50th img {
    vertical-align: middle;
    padding-right: calc(10px);
    width: calc(4rem);
    padding-bottom: 3px;
  }
  .movply:hover, .mov50th:hover {
    background-color: hsla(19, 33%, 17%, 1.0);
    transition: all 0.5s;
  }
  /****************************************
トピックス
*****************************************/
  .topic_box {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    max-width: 1280px;
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 20px;
    padding-top: calc(60px);
    padding-bottom: calc(60px);
  }
  .t_pr {}
  .t_pl {}
  .topic_item {}
  .topic_tit {
    border-bottom: 2px solid #90804A;
    width: calc(100% - 20px);
    margin-bottom: 12px;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
    color: #90804A;
    font-size: 14px;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
  }
  .topic_tit a {
    float: right;
  }
  .topic {
    float: left;
    border-bottom: 1px dotted #464646;
    width: calc(100% - 40px);
    padding-left: 20px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    position: relative;
    font-size: 16px;
    color: #333333;
    overflow: hidden
  }
  a.topic:hover {
    opacity: 0.8;
  }
  .topic span {
    display: inline;
    width: 112px;
    height: 112px;
    line-height: 1.6rem;
    float: left;
    margin-right: 22px;
    font-size: 1.2rem;
    color: #90804A;
  }
  .topic p {
    display: inline;
    line-height: 16px;
    font-size: 14px;
    color: #90804A;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
    font-weight: bold;
  }
  .topic:hover > .topic_link {
    color: #94B263;
    cursor: pointer;
  }
  .topic li {    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;}
  .topic_link {
    margin-top: 18px;
    text-align: right;
    font-size: 14px;
    position: absolute;
    right: 0px;
    bottom: 13px;
    color: #7B6624;
  }
  .topic li strong {
 color: rgba(158,42,0,1.00);
}
  /****************************************
MENU 表示
*****************************************/
  .clone-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    transition: .5s;
    transform: translateY(-200%);
  }
  .is-show {
    transform: translateY(140px);
  }
  /****************************************
MENU 表示
*****************************************/
  .topimg {
    /* [disabled]width: 100vw; */
    /* [disabled]top: 93px; */
    position: relative;
  }
  .takumi {
    background-color: #332300;
    background-image: url(../images/top_takumi_img.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
  .takumi_box {
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
    height: 720px;
  }
  .takumi_link {
    /* [disabled]position: absolute; */
    width: calc(720px / 10 * 5);
    text-align: center;
    /* [disabled]top: 30%; */
    color: #FFFFFF;
    height: calc(720px / 10 * 3.5);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #322200;
    font-size: calc(16px);
    letter-spacing: calc(0.1em);
  }
  .takumi_link img {
    width: 140px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px;
    max-height: none;
  }
  .takumi_link a {
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    height: 40px;
    line-height: 40px;
    background-color: #90804A;
    padding-right: 40px;
    padding-left: 40px;
    margin-top: 20px;
    color: #FDFDFD;
    border-radius: 20px;
  }
  .takumi_link a:hover {
    background-color: #B3A26B;
    color: #FFFFFF;
    cursor: pointer;
  }
  .video {
    overflow: hidden;
    position: relative;
    display: flex;
    width: 100vw;
    height: 550px;
  }
  .fitMovie {
    width: 100vw;
    position: absolute;
  }
  .video_shade {
    width: 100vw;
    height: 550px;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.50);
    text-align: center;
  }
  .video_box {
    margin-right: auto;
    margin-left: auto;
    color: #FFFFFF;
    position: relative;
    height: 258px;
    width: 960px;
  }
  .video_intro {
    width: 40%;
    display: block;
    float: left;
  }
  .video_tit, .gallery_tit, .toptit, .media_tit {
    font-size: calc(26px);
    line-height: 5rem;
    letter-spacing: calc(0.2em);
    height: auto;
    width: auto;
    padding-bottom: calc(0.5em);
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
  }
  .video_txt {
    width: 400px;
  }
  .video_bot {
    width: 458px;
    height: 258px;
    position: absolute;
    background-image: url(../images/bideo_bnr.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .video_bot:hover {
    opacity: 0.8;
  }
  .gallery {
    background-image: url(../images/top_gallery_img.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100vw;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
  }
  .gallery_box {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 768px;
    margin-right: auto;
    margin-left: auto;
    width: 80%;
    position: relative;
    max-width: 1280px;
    height: 480px;
  }
  .gallery_txt {
    font-size: calc(16px);
    line-height: calc(26px);
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    padding-bottom: calc(0.5em);
    letter-spacing: calc(0.1em);
  }
  .gallery_link {
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-size: calc(16px);
    right: 0px;
    float: right;
    width: 380px;
    height: 280px;
    position: absolute;
    background-color: #231815;
    text-align: left;
    color: #FFFFFF;
    padding-left: 40px;
    top: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .gallery_link a {
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
    background-color: #90804A;
    padding-right: 40px;
    padding-left: 40px;
    margin-top: 16px;
    border-radius: 20px;
  }
  .gallery_link a:hover {
    background-color: #B3A26B;
    color: #FFFFFF;
    cursor: pointer;
  }
  .media_box {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    max-width: 1280px;
    display: grid;
    grid-template-columns: 50% 50%;
    padding-top: calc(40px);
    padding-bottom: calc(40px);
  }
  .media_txt {
    font-size: calc(16px);
    line-height: calc(26px);
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    padding-bottom: calc(0.5em);
    letter-spacing: calc(0.1em);
  }
  .media_link {
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-size: calc(16px);
    width: calc(100%);
    text-align: center;
    color: #231716;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .media_link a {
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
    background-color: #90804A;
    padding-right: 40px;
    padding-left: 40px;
    margin-top: 16px;
    border-radius: 20px;
  }
  .media_link a:hover {
    background-color: #B3A26B;
    color: #FFFFFF;
    cursor: pointer;
  }
  .media {
    /* [disabled]flex-shrink: 0; */
    width: 940px;
    display: flex;
    flex-direction: row;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 50px;
    background-color: #FFFFFF;
    padding-left: 27px;
    padding-top: 21px;
  }
  .media_imgs {
    width: calc(100%);
    display: grid;
    grid-template-columns: repeat(4, 2fr);
    gap: 20px;
  }
  .media_imgs img {
    width: 100%;
    height: auto;
    display: block;
  }
  .profile, .recruit {
    text-align: center;
    font-size: calc(16px);
    line-height: calc(28px);
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    padding-top: calc(60px);
    padding-bottom: calc(60px);
    color: #fff;
  }
  .profile {
    background-image: url(../images/profile.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .recruit {
    background-image: url("../images/history.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .profile img, .recruit img {
    width: auto;
    height: 180px;
    padding-bottom: calc(1em);
  }
  .link_box {
    padding: calc(3em);
    background-color: rgba(255, 255, 255, 0.25);
  }
  .infomation {
    width: 100vw;
    padding-top: 60px;
    padding-bottom: 60px;
    background-image: url(../images/top_media_img.jpg);
    background-position: center center;
    background-size: cover;
  }
  .info_box {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    display: grid;
    grid-template-columns: 50% 50%;
    min-height: calc(100vw / 3.5);
    font-size: 1.4rem;
    line-height: 2.2rem;
  }
  .info_box .bnr {
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
    background-color: #90804A;
    padding-right: 40px;
    padding-left: 40px;
    margin-top: 16px;
    border-radius: 20px;
  }
  .info_box .bnr:hover {
    background-color: #B3A26B;
    color: #FFFFFF;
    cursor: pointer;
  }
  .info_box .bot {
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    height: 40px;
    line-height: 40px;
    color: #90804A;
    padding-right: 40px;
    padding-left: 30px;
    margin-top: 10px;
    width: 230px;
    text-align: center;
    vertical-align: middle;
    border: thin solid #90804A;
    border-radius: 20px;
  }
  .info_box .bot:hover {
    background-color: #B3A26B;
    color: #FFFFFF;
    cursor: pointer;
  }
}
/****************************************
PC用
*****************************************/
/****************************************
SP用
*****************************************/
@media screen and (max-width:480px) {
  /****************************************
トップスライド
*****************************************/
  #topmovie {
    position: relative; /*h1の中央寄せ配置の起点とするためのrelative*/
    width: 100vw;
    height: 100vh; /* 変数をサポートしていないブラウザのフォールバック 
  height: calc(var(--vh, 1vh) * 100);*/
    overflow: hidden;
  }
 /**/ #video-areaSP { 
    position: fixed;
    z-index: -1; /*最背面に設定*/
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
  }
  #videoSP {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width:calc(100vw); /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: auto; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-width: 100%;
    min-height: 100%;
  }
  .topcopy {
	position: absolute;
	top: 0%;
	left: 0%;
	display: flex;
	justify-content: center; /* 横方向の中央揃え */
	align-items: center; /* 縦方向の中央揃え */
	width: calc(100%);
	height: calc(100%);
	color: #FFFFFF;
	font-size: calc(3em);
	letter-spacing: calc(0.1em);
	line-height: calc(2em);
	text-align: left;
	text-orientation: upright;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-variant-east-asian: full-width;
	-moz-font-feature-settings: "fwid";
	-webkit-font-feature-settings: "fwid";
	font-feature-settings: "fwid";
	z-index: 10;
  }
  .copy {
    position: absolute;
  }
  .hedtcglogo {
    position: absolute;
    width: 25%;
    height: auto;
    bottom: 2%;
    right: 5%;
    z-index: 1;
  }
  .hedtcglogo img {
    width: 100%;
  }
  /****************************************
トピックス
*****************************************/
  .topic_box {
    width: calc(90vw);
    margin-right: auto;
    margin-left: auto;
    display: grid;
    grid-template-columns: 1fr; /* 2列の等しい幅の設定 */
    grid-gap: 20px; /* カラム間の隙間の設定 */
    padding-top: calc(30px);
    padding-bottom: calc(30px);
  }
  .t_pr {}
  .t_pl {}
  .topic_item {}
  .topic_tit {
    border-bottom: 2px solid #90804A;
    width: calc(100%);
    margin-bottom: 12px;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
    color: #90804A;
    font-size: 14px;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
  }
  .topic_tit a {
    float: right;
  }
  .topic {
    width: calc(100%);
    border-bottom: 1px dotted #464646;
    margin-bottom: 10px;
    padding-bottom: 10px;
    display: grid;
    grid-template-columns: 112px auto; /* 2列の等しい幅の設定 */
    grid-gap: 20px; /* カラム間の隙間の設定 */
    font-size: 16px;
    color: #333333;
  }
  a.topic:hover {
    opacity: 0.8;
  }
  .topic span {
    display: inline-block;
    width: 112px;
    height: 112px;
    line-height: 1.6rem;
    font-size: 1.2rem;
    color: #90804A;
  }
  .topic span img {
    width: 112px;
    height: 112px;
  }
  .topic p {
    display: inline-block;
    line-height: 16px;
    font-size: 14px;
    color: #90804A;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
    font-weight: bold;
  }
  .topic:hover > .topic_link {
    color: #94B263;
    cursor: pointer;
  }
  .topic ul {
    white-space: normal;
    width: calc(100%); font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
  }
    .topic li strong {
 color: rgba(158,42,0,1.00);
}
  .topic_link {
    margin-top: 18px;
    text-align: right;
    font-size: 14px;
    color: #7B6624;
  }
  /****************************************
MENU 表示
*****************************************/
  .clone-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    transition: .5s;
    transform: translateY(-200%);
  }
  .is-show {
    transform: translateY(140px);
  }
  /****************************************
MENU 表示
*****************************************/
  .topimg {
    /* [disabled]width: 100vw; */
    /* [disabled]top: 93px; */
    position: relative;
  }
  .takumi {
    background-color: #332300;
    background-image: url(../images/top_takumi_img.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
  .takumi_box {
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
    height: 720px;
  }
  .takumi_link {
    /* [disabled]position: absolute; */
    width: calc(720px / 10 * 5);
    text-align: center;
    /* [disabled]top: 30%; */
    color: #FFFFFF;
    height: calc(720px / 10 * 3.5);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #322200;
    font-size: calc(16px);
    letter-spacing: calc(0.1em);
  }
  .takumi_link img {
    width: 140px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px;
    max-height: none;
  }
  .takumi_link a {
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    height: 40px;
    line-height: 40px;
    background-color: #90804A;
    padding-right: 40px;
    padding-left: 40px;
    margin-top: 20px;
    color: #FDFDFD;
    border-radius: 20px;
  }
  .takumi_link a:hover {
    background-color: #B3A26B;
    color: #FFFFFF;
    cursor: pointer;
  }
  .video {
    overflow: hidden;
    position: relative;
    display: flex;
    width: 100vw;
    height: 550px;
  }
  .fitMovie {
    width: 100vw;
    position: absolute;
  }
  .video_shade {

    width: 100vw;
    height: 550px;
    z-index: 1;
    text-align: center;
  }
  .video_box {
    margin-right: auto;
    margin-left: auto;
    color: #FFFFFF;
    position: relative;
    height: 258px;
    width: 960px;
  }
  .video_intro {
    width: 40%;
    display: block;
    float: left;
  }
  .video_tit, .gallery_tit, .toptit, .media_tit {
    font-size: calc(26px);
    line-height: 5rem;
    letter-spacing: calc(0em);
    height: auto;
    width: auto;
    padding-bottom: calc(0.5em);
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
  }
  .video_txt {
    width: 400px;
  }
  .video_bot {
    width: 458px;
    height: 258px;
    position: absolute;
    background-image: url(../images/bideo_bnr.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .video_bot:hover {
    opacity: 0.8;
  }
  .gallery {
    background-image: url(../images/top_gallery_img.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100vw;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
  }
  .gallery_box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    position: relative;
    height: 480px;
  }
  .gallery_txt {
    font-size: calc(16px);
    line-height: calc(26px);
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    padding-bottom: calc(0.5em);
    letter-spacing: calc(0.1em);
  }
  .gallery_link {
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-size: calc(16px);
    background-color: #231815;
    text-align: center;
    color: #FFFFFF;
    padding: calc(1.5em);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .gallery_link a {
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
    background-color: #90804A;
    padding-right: 40px;
    padding-left: 40px;
    margin-top: 16px;
    border-radius: 20px;
  }
  .gallery_link a:hover {
    background-color: #B3A26B;
    color: #FFFFFF;
    cursor: pointer;
  }
  .media_box {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    max-width: 1280px;
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(40px);
    padding-top: calc(60px);
    padding-bottom: calc(60px);
  }
  .media_txt {
    font-size: calc(16px);
    line-height: calc(26px);
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    padding-bottom: calc(0.5em);
    letter-spacing: calc(0.1em);
  }
  .media_link {
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-size: calc(16px);
    width: calc(100%);
    text-align: center;
    color: #231716;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .media_link a {
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
    background-color: #90804A;
    padding-right: 40px;
    padding-left: 40px;
    margin-top: 16px;
    border-radius: 20px;
  }
  .media_link a:hover {
    background-color: #B3A26B;
    color: #FFFFFF;
    cursor: pointer;
  }
  .media {
    /* [disabled]flex-shrink: 0; */
    width: 940px;
    display: flex;
    flex-direction: row;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 50px;
    background-color: #FFFFFF;
    padding-left: 27px;
    padding-top: 21px;
  }
  .media_imgs {
    width: calc(100%);
    display: grid;
    grid-template-columns: repeat(4, 2fr);
    gap: 1px;
  }
  .media_imgs img {
    width: 100%;
    height: auto;
    display: block;
  }
  .info_box {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    display: grid;
    grid-template-columns: 1fr;
    min-height: calc(100vw / 3.5);
    font-size: 1.4rem;
    line-height: 2.2rem;
  }
  .profile, .recruit {
    text-align: center;
    font-size: calc(16px);
    line-height: calc(26px);
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    padding-top: calc(60px);
    padding-bottom: calc(60px);
    color: #fff;
  }
  .profile {
    background-image: url(../images/profile.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .recruit {
    background-image: url("../images/history.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .profile img, .recruit img {
    width: auto;
    height: 180px;
    padding-bottom: calc(1em);
  }
  .link_box {
    padding: calc(2em);
    background-color: rgba(255, 255, 255, 0.25);
  }
  .infomation {
    width: 100vw;
    padding-top: 60px;
    padding-bottom: 60px;
    background-image: url(../images/top_media_img.jpg);
    background-position: center center;
    background-size: cover;
  }
  .info_box .bnr {
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
    background-color: #90804A;
    padding-right: 40px;
    padding-left: 40px;
    margin-top: 16px;
    border-radius: 20px;
  }
  .info_box .bnr:hover {
    background-color: #B3A26B;
    color: #FFFFFF;
    cursor: pointer;
  }
  .info_box .bot {
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    height: 40px;
    line-height: 40px;
    color: #90804A;
    padding-right: 40px;
    padding-left: 30px;
    margin-top: 10px;
    width: 230px;
    text-align: center;
    vertical-align: middle;
    border: thin solid #90804A;
    border-radius: 20px;
  }
  .info_box .bot:hover {
    background-color: #B3A26B;
    color: #FFFFFF;
    cursor: pointer;
  }
} /* 768px以上*/
/****************************************
SP用
*****************************************/