@charset "utf-8";


@media screen and (min-width:1750px) {
    .achievements p img {
        width: 50%;
    }
}


.mv {
    /* margin: 20px 0; */
    margin: 0px 0 30px;
    position: relative;
    overflow: hidden;
}

@keyframes img-wrap {
    100% {
      transform: translateX(100%);
    }
  }

.mv-img {
    position: relative;
}

.mv-text {
    position: absolute;
    z-index: 10;
    top: 11%;
    right: 24%;
  font-size: 2.5rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family:'Noto Serif JP',"Yu Mincho", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.mv-text.flat{
    writing-mode: horizontal-tb;
}
.big-mv-text{
    position: absolute;
    z-index: 10;
    top: 11%;
    right: 24%;
  font-size: 2.5rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    /* font-family: "游明朝体", YuMincho, "游明朝", 'Noto Serif JP',"Yu Mincho", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
}



.mv-text-top {
    position: absolute;
    z-index: 10;
    top:7%;
    font-weight: 900;
    right: 24%;
    letter-spacing: 5px;
    font-size: 1.5vw;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family:'Noto Serif JP',"Yu Mincho", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}


.mv-text-small {
    font-size: 0.9vw;
  margin-top: 20vh;
}

.mv img {
    width: 100%;
    object-fit: cover;
    /* max-height: 468px; */
    /* border-radius: 0 0 5% 0; */
    /* margin-top: 60px; */
}
.mv img.mv-penki {
    position: absolute;
    bottom: 3%;
    width: 26%;
    right: 12%;
    z-index: 9;
}
.mv .voice img{
object-position: top;
}
.mv .voice img{
  object-position: top;
}
.fadeIn{
    opacity: 1;
    transition: all 0.3s;
}
.news-sec {
    width: 70%;
    margin: 50px 0;
}

.news-sec p {
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-list {
    width:80%;
    position: relative;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding-left: 10px ;

}
.news-list-date{
    margin-right: 3%;
}
.news-list::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 1px;
    color: #000;
    left: -5%;
}

.news-list li {
    border-bottom: 1px dotted #333;
    line-height:2;
}

.news-list li:last-child {
    border-bottom: none;
}

.date {
    margin-right: 10px;
}

.main {
    background-color: #ddd;
    width: 90%;
    margin: 0 0 0 auto;
    height: auto;
    position: relative;
    overflow: hidden;
    padding: 300px 0 100px 0;
    border-radius: 5vh 0 0 5vh;
    background-image: url(../img/top_main-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.main img,.customer-voice img{
    transition: transform .6s ease; /* ゆっくり変化させる */
}
.main img:hover,.customer-voice2 img:hover{
    transform: scale(1.1); /* 拡大 */
}

.main2 {
    background-color: #ddd;
    width: 90%;
    margin: 0 0 0 auto;
    height: auto;
    position: relative;
    overflow: hidden;
    padding: 300px 0 100px 0;
    border-radius: 5vh 0 0 5vh;
}
.main3{
    width: 90%;
    margin: 0 0 0 auto;
}
.achievements{
    width: 78.2%;
}
.achievements-head{
    background-color: #B30040;
    color: #fff;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    padding: 10px;
    margin-top: 30px;
}
.achievements-body{
    text-align: center;
    background-image: url(../img/kensu-bg.jpg);
    background-size: cover;
    width: 100%;
    padding: 40px;
}
.achievements-body p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
}
.achievements-body p::before{
    transform: scale(0.7);
    position: absolute;
    content: url(../img/home.svg);
    left: -56px;
    top: -19px;
}
.achievements-body .swiper-slide{
    background-color: #fff;
    border-radius: 20px;
    padding: 20px 36px;
    text-align: center;

}
.achievements-body .swiper-slide dt{
    color: #B30040;
    font-weight: bold;
    font-size: 18px;
    border-bottom: 1px solid #333;
    margin-top: 20px;
    display: inline-block;
}
.achievements-body .swiper-slide dd{
    color: #B30040;
    font-weight: bold;
    line-height: 1;
    margin-top: 20px;
    font-size: 67px;
    width: 105px;
    margin: 20px auto 0 auto;
    border-bottom: 1px solid #333;
}
.achievements-body .swiper-slide dd span{
    font-size: 14px;
    color: #333;
}
.left_side-text {
    position: absolute;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: "游明朝体", YuMincho,'Noto Serif JP', "游明朝", "Yu Mincho", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    left: 7%;
    top: 2%;
    font-size: 2vw;
    border-left: 1px solid #000;
}
.left2{
    top:5%
}
.left_side-text-en{
    position: absolute;
    left: -73%;
    font-size: 1.5vw;
    top: 8%;
    text-orientation: mixed;
}
.big_text {
    position: absolute;
    top:1%;
    left: -2%;
    font-weight: bold;
    font-size:9vw;
}

.main h3 {
    font-family: "游明朝体", YuMincho, 'Noto Serif JP',"游明朝", "Yu Mincho", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 2.5rem;
}

.main .flex-left {
    width: 40%;
    /* overflow: hidden; */
    margin-right: 5%;
}

.main .flex-right {
    width: 40%;
    /* overflow: hidden; */
    position: relative;
}

.btn1 button ,.btn1 .link-button {
    border: 1px solid #B30040;
    background-color: #fff;
    border-radius: 100vh;
    color: #B30040;
    padding: 20px 100px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.btn1 button::before ,.btn1 .link-button::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0%;
    width: 23%;
    background-color: #E8E8E8;
    height: 100%;
    border-radius: 100%;
    transition: all 0.5s;
    z-index: 0;
}

.btn1 button::after ,.btn1 .link-button::after {
    position: absolute;
    content: "";
    top: 0;
    right: 23%;
    height: 60%;
    width: 1px;
    background-color: #B30040;
}

.btn1 button:hover::before ,.btn1 .link-button:hover::before {
    transform: translateX(223px);
}

.btn-arrow {
    top: 35%;
    position: absolute;
    right: 8%;
}

.example_thumb {
    max-width: 400px;
    position: relative;
}

.works-thumb img{
    width: 400px;
    height: 400px;
    object-fit: cover;
}

.example_right-txt {
    color: #fff;
    position: absolute;
    top: 3%;
    right: 3%;
    background-color: #000;
    line-height: 1.5;
    letter-spacing: 3px;
    padding: 5px;
}

.example_left-txt {
    background-color: #fff;
    color: #000;
    position: absolute;
    bottom: 10%;
    left: 5%;
    line-height: 1.5;
    letter-spacing: 3px;
    padding: 5px;
}

.example_left-txt span {
    font-size: 0.8rem;
    margin-top: 6vh;
}


/* scroll-down */

/*スクロールダウン全体の場所*/
.scrolldown{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
    /*矢印の動き1秒かけて永遠にループ*/
	animation: arrowmove 1s ease-in-out infinite;
    right: 100px;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scrolldown span{
    /*描画位置*/
	position: absolute;
    left: -27px;
	bottom:10px;
    /*テキストの形状*/
	color: #000;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #000;
    transform: skewX(-31deg);
}

.scrolldown:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	right:0;
    /*矢印の形状*/
	width:1px;
	height: 77px;
	background:#000;
}
/* scroll-down */

/* button-area */
.btn-area button ,.btn-area .link-button {
    border-radius: 100vh;
    background-color: #fff;
    padding: 20px 100px;
    cursor: pointer;
    position: relative;
    box-shadow: 0px 5px 0px #929292;
}

.btn-area button::after ,.btn-area .link-button::after {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #000;
    top: 42%;
    right: 5%;
}

.btn-area button:hover::after ,.btn-area .link-button:hover::after {
    opacity: 0.8;
}

/* button-area */

/* reason */
.reason-item {
    width: 35%;
    border-radius: 10px 10px 0 0;
    margin-bottom: 20px;
}

.reason-item img {
    border-radius: 10vh 10vh 0 0;
    width: 100%;
}

.reason-text {
    padding: 20px;
    background-color: #B30040;
    font-size: 0.9rem;
    height:315px;
    width: 100%;
}

.reason-text h4 {
    font-weight: bold;
    font-size: 1.7rem;
}

/* /reason */

/* media-area */
.media-area-item {
    border: 3px solid #B30040;
    padding: 10px;
    background-color: #fff;
    width: 40%;
}

.media-area-item a {
    background-color: #B30040;
    padding: 10px;
}
.media-area-item a.tomedia{
    background-color: transparent;
}
.media-area-item img {
    width: 100%;
}

.media-area-item h5 {
    font-size: 1.5rem;
}

/* media-area */


/* 20240329年度別実績一覧 */
.year__by-build{
    /* width: 100%; */
    margin-top: 30px;
}
.year__by-build li{
    border-bottom: 1px dotted #333;
    padding: 10px 0;
    font-size: 2vw;
    display: flex;
    justify-content: right;
    align-items: center;
}
.year__by-build li img{
    width: 60px;
}
.year__by-build li:nth-child(2){
    border-top: 1px solid #333;
}
.year__by-build-num{
    font-weight: bold;
    color: #B30040;
}
.year__by-build li.year__by-build-head{
    justify-content: left;
    font-weight: bold;
    font-size: 1.8rem;
    border-bottom: none;
}

/* 20240418年度別実績一覧追加 */
.achievements table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    overflow:auto;
}
.achievements table tr td{
    background-color: #fff;
    border: 1px solid #B30040;
    text-align: center;
    font-size: 16px;
    height: 50px;
    width: 50px;
}
.achievements table tr td:first-child{
    font-weight: bold;
    white-space:nowrap;
}
.achievements table tr.total-head td{
    background-color: #B30040;
    color: #fff;
    white-space:nowrap;
    
}
.sp-non-inline{
    display: inline-block;
}

/* 20250402 TOPIX 追加 */
.topix-bg{
    background-color:#eee;
    background-image: url(../img/topix_back.jpg);
    margin: 5rem 0;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
}

.topix{
    padding: 3rem 0;
}
.topix-label{
    display:flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #000;
}
.topix-label div{
    font-size: 3rem;
    font-family: 'Noto Serif JP';
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}
.topix-label div:before{
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    background-color: #B30040;
    margin-right: 1rem;
    transform: translateY(.2rem);
}
.topix-label p{
    font-size:1.5rem;
}

.topix-contents-inner{
    padding: 3rem 0;
}

.topix-label-sub{
    margin-bottom:2.5rem;
}
.topix-label-sub p{
    font-size: 2.5rem;
    text-align: center;
    font-weight: bold;
}
.topix-label-sub div{
    width: 4rem;
    height: 0.375rem;
    background-color: #B30040;
    margin: 0 auto;
}

.topix-contents-blocks{
    display:flex;
    margin-bottom: 4rem;
}
.topix-contents-block{
    flex:1;
}
.topix-contents-block:not(:last-child){
    margin-right:2rem;
}
.block-image.sakura-frame{
    margin-bottom:1rem;
    padding: 10% 12.5%;
    background-image: url("../img/topix_sakura.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 1rem;
    box-shadow: 0 4px 8px #00000066;
}
.block-image.sakura-frame img{
    width:100%;
    height: 21vw;
    object-fit: cover;
}

.block-image.back-blur{
    margin-bottom:1rem;
    position: relative;
    padding-bottom: 10%;
    z-index: 0;
}
.block-image.back-blur img{
    width: 90%;
    height: 28.25vw;
    object-fit: cover;
}
.block-image.back-blur img:nth-child(1){
    position: absolute;
    right:0;
    bottom:0;
    filter: blur(.5rem);
    z-index:-1;
}


.block-comment{
    text-align: center;
    margin-bottom:2rem;
}
.block-comment .word{
    display: flex;
    align-items: center;
    justify-content: center;
}
.block-comment .word:before{
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    background-color: #B30040;
    margin-right: .5rem;
}
.block-comment p:nth-child(2),
.block-comment .address{
    color:#6A6A6A;
}

.topix-contents-button a{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    color: #fff;
    height: 4rem;
    max-width: 20rem;
    margin: 0 auto;
    transition: background-color .4s ease;
}
.topix-contents-button a::after{
    position: absolute;
    content: "\f144";
    right: 1rem;
    font-size: 1.75rem;
    transition: all .4s ease;
}
.topix-contents-button a:hover{
    background-color: #B30040;
}
.topix-contents-button a:hover:after{
    right: 0.75rem;
}

.btn-topix button ,.btn-topix .link-button {
    border: 1px solid #B30040;
    background-color: #fff;
    border-radius: 100vh;
    color: #B30040;
    padding: 0;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    height: 4rem;
    width: 100%;
}

.btn-topix button::before ,.btn-topix .link-button::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 4rem;
    background-color: #E8E8E8;
    height: calc(100% + 2px);
    border-radius: 100%;
    transition: left 0.5s;
    z-index: 0;
}

.btn-topix button:hover::before ,.btn-topix .link-button:hover::before {
    left:calc(100% - 4rem);
    right:0;
}

.btn-topix button::after ,.btn-topix .link-button::after {
    position: absolute;
    content: "";
    top: 0;
    right: 4rem;
    height: 60%;
    width: 1px;
    background-color: #B30040;
}
.btn-topix .btn-arrow {
    top: 50%;
    transform: translateY(-50%);
    right: 1.5rem;
}

.wall-paper_banner{
    width: 50%;
}


.swiper.sp-only {
  display: none;
}