/*!
Theme Name: uruku
Theme URI: http://underscores.me/
Author: uruku
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ku
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

uruku is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*ここからcss */
/*リセットcss */
html {
    font-size: 62.5%; 
    }
    
    body { 
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #f7f7f8;
    }
    
    body * {
    box-sizing: border-box;
    position: relative;
    }
    
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    dt,
    dd {
    margin: 0; 
    color: #474d4b;
    font-size: 1.6rem;
    }
    
    ul,
    ol {
    margin: 0;
    padding: 0; 
    }
    
    img {
    width: 100%; 
    height: auto; 
    vertical-align: bottom; 
    }
    
body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
    box-sizing: border-box; 
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
}
/* ヘッダー */
.site-header {
    color: #49474c;
    padding: 20px 5%;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 102;
    border-bottom: 3px solid #9B376B;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.site-branding {
    max-width: 240px;
    width: 50%;
    height: 100px;
    object-fit: cover;;
}
.site-brandnig img {
    max-width: 100%;
}
.site-title {
    display: none;
}
.site-description {
    display: none;
}
.menu-button {
    display: block;
    position: fixed;
    top: 40px;
    right: 25px; /* 調整 */
    padding: 0;
    width: 32px;
    height: 25px;
    border: none;
    background: none;
}
.menu-button span {
    display: block;
    width: 25px;
    height: 3px;
    position: absolute;
    background: #49474c;
    margin: 4px 0;
    transition: all 0.4s;
}
.menu-button span:nth-of-type(1) {
    top: 0px;
}
.menu-button span:nth-of-type(2) {
    top: 10px;
}
.menu-button span:nth-of-type(3) {
    top: 20px;
}
.nav-list {
    position: fixed;
    top: 100px;
    right: -300px; 
    height: 50%;
    width: 300px;
    flex-direction: column;
    background: #9B376B;
    padding: 40px 20px;
    display: none;
}
.nav-list.active {
    display: block;
    transform: translateX(-300px);
}
.nav-list li {
    margin: 0 0 20px 0;
    font-size: 1.8rem;
    color: #f7f7f8;
    list-style-type: none;
}
.nav-list li a {
    color: #f7f7f8;
    text-decoration: none;
}
.menu-button.open span:nth-child(1) {
    transform: rotate(45deg);
    top: 10px;
}
.menu-button.open span:nth-child(2) {
    opacity: 0;
}
.menu-button.open span:nth-child(3) {
    transform: rotate(-45deg);
    top: 10px;
}
main.active {
    opacity: .5;
}
@media screen and (max-width: 480px) {
    .site-branding {
        width: 40%;
        height: 60px;
    }
}

/* ヘッダーここまで */
.mainimg {
    width: 100%;
    object-fit: cover;
    background-color: #f6f6f4;
}
/* 共通設定 */
.inner {
    max-width: 1080px;
    width: 90%;
    margin: 0 auto;
}
section {
    margin: 80px 0;
}
h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    text-align: center;
}
h2::after {
    display: block;
    width: 36px;
    height: 3px;
    margin: 10px auto;
    content: '';
    background-color: #b9a589;
}
p {
    font-size: 1.6rem;
    line-height: 1.7;
}
.fadeLeftTrigger,
.fadeRightTrigger {
    visibility: hidden;
}
.fadeLeft{
    animation-name:fadeLeftAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes fadeLeftAnime{
    from {
    opacity: 0;
    transform: translateX(-100px);
    }

    to {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    }
}
.fadeRight{
    animation-name:fadeRightAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeRightAnime{
    from {
    opacity: 0;
    transform: translateX(100px);
    }
    
    to {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    }
}
/* お知らせ */
#news .inner {
    text-align: center;
}
.news-list a {
    display: block;
    width: 100%;
    text-decoration: none;
}
.news-item {
	list-style-type: none;
}
.news-item h3 {
    margin: 0;
}
/* スライダーの設定 */
.slider,
.music-slider {
width:94%;
margin:0 auto;
display: none;
}
.slider.slick-initialized,
.music-slider.slick-initialized {
display: block;
}
.slider .news-item img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}
.music-slider .news-item img {
    width:100%;
    height:auto;
}
.slider .slick-slide,
.music-slider .slick-slide {
    margin:0 10px;
}

/* 新着情報 */
#info .inner {
    text-align: center;
}
.info-list {
    max-width: 720px;
    width: 90%;
    margin: 40px auto;
    text-align: left;
}
.info-list li {
    font-size: 1.6rem;
    padding: 15px 0;
    border-top: 1px solid #000;
    list-style-type: none;
}
.info-list li:last-child {
    border-bottom: 1px solid #000;
}
.info-list li a {
    display: block;
    text-decoration: none;
    color: inherit;
}
.info-list li a  span {
    display: inline-block;
    margin: 0 40px 0 0;
    font-family: "Noto Serif", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 600;
    font-variation-settings:
        "wdth" 100;
}
h3 {
    font-size: 1.8rem;
    margin: 0 0 10px 0;
}
@media screen and (max-width: 480px) {
    .info-list li a span {
        display: block;
        margin: 0 0 10px 0;
    }
}
/* 紹介動画 */
.video {
    margin: 0 auto;
}
.profile-video {
    max-width: 480px;
    width: 90%;
    margin: 0 auto;
    aspect-ratio: 4/3;
}
.profile-video iframe {
    width: 100%;
    height: 100%;
}
.profile-container {
    display: flex;
    height: auto;
    margin: 0 0 60px 0;
}
#profile {
    background-color: #9B376B;
    padding: 40px 0;
}
#profile h2 {
    color: #f7f7f8;
}
.profile-container img {
    max-width: 320px;
    width: 90%;
    height: auto;
}
.profile-info {
    width: calc(100% - 360px);
    margin: 0 0 0 40px;
    padding: 20px 40px;
    border-left: 3px solid #f7f7f8;
}
.profile-info h3 {
    font-size: 1.8rem;
    color: #f7f7f8;
}
.profile-info .furigana {
    font-size: 1.2rem;
    color: #f7f7f8;
    margin: 0 0 60px 0;
}
.profile-info .furigana::after {
    display: block;
    content: "";
    width: 80px;
    height: 2px;
    margin: 10px 0 0 0;
    background-color: #b9a589;
}
.profile-info p {
    font-size: 1.6rem;
    line-height: 1.7;
    margin: 0 0 20px 0;
    color: #f7f7f8;
}
@media screen and (max-width: 480px) {
    .profile-info {
        width: 90%;
        border-left: none;
        border-top: 3px solid #f7f7f8;
        margin-left: 0;
    }
}
.banner-container{
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 20px);
    margin-left: -20px;
}
.banner-container a {
    display: block;
    width: calc((100% - 120px) / 3);
    margin: 20px;
}
@media screen and (max-width: 480px) {
    .banner-container {
        width: 90%;
        margin: 0 auto;
        flex-direction: column;
        justify-content: center;
    }
    .banner-container a {
        width: 100%;
        margin: 0 0 20px 0;
    }
}
/* x */
.sns-content {
    max-width: 480px;
    width: 90%;
    padding: 20px;
    margin: 0 auto;
    border: 2px solid #9B376B;
}
.twitter-timeline {
    width: 100%;
    margin: 0 auto;
}
.link-btn {
    background-color: #000;
    display: block;
    width: 100%;
    height: 60px;
    margin: 0 auto;
    padding: 20px;
    color: #fff;
    text-decoration: none;
}
@media screen and (max-width: 480px) {
    .twitter-timeline {
        width: 90%;
    }
}
/* お問い合わせボタン　*/
#contact {
    text-align: center;
}
/* ページトップ */
#pagetop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 1.4rem;
    line-height: 1;
    z-index: 100;
}
#pagetop > a {
    background: #b9a589;
    color: #fff;
    width: 60px;
    height: 60px;
    padding: 15px 10px;
    text-decoration: none;
    text-align: center;
    display: block;
    border-radius: 50%;
    opacity: .9;
    transition: all .3s ease;
}
.more-btn, .contact-btn {
    background-color: #bb6c93;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 1.6rem;
    cursor: pointer;
    margin: 0 auto;
    display: inline-block;
    margin: 0 auto;
    text-decoration: none;
}
.more-btn:hover, .contact-btn:hover {
    background-color: #ce8eaa;
}
 /* フッター */
footer {
    color: #f7f7f8;
    background-color: #9B376B;
    padding: 10px;
    padding: 40px 0;
}
.site-info {
    max-width: 1080px;
    width: 90%;
    margin: 0 auto;
}
.footer-menu {
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    margin: 0 0 20px 0;
}
.footer-menu li {
    margin: 10px 0;
    padding: 0 20px;
    list-style-type: none;
    font-size: 1.4rem;
}
.footer-menu li a {
    text-decoration: none;
    color: inherit;
}
.site-info p {
    color: #f7f7f8;
    text-align: center;
    font-size: 1.2rem;
}

/* レスポンシブデザイン */
@media (max-width: 480px) {
    .news-list {
        flex-direction: column;
    }
    .news-item {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
    }
    .profile-container {
        flex-direction: column;
        align-items: center;
    }
    .profile-container img {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
    }
    .profile-info {
        width: 90%;
    }
}

/*　下層ページ */
.inner h1 {
    font-size: 2.4rem;
    margin: 40px 0;
    text-align: center;
}
.inner h1::after {
    display: block;
    width: 36px;
    height: 3px;
    margin: 10px auto;
    content: '';
    background-color: #c7b397;
}
@media screen and (max-width: 480px) {
    .inner h1 {
        font-size: 2.4rem;
    }
}
/* お知らせ・新着情報共通パーツ */
.news-inner,
.info-inner {
    max-width: 720px;
    width: 90%;
    margin: 0 auto;
}
.news-inner h1,
.info-inner h1{
    font-size: 2.4rem;
    margin: 40px 0;
    text-align: center;
}
.news-inner h1::after,
.info-inner h1::after{
    display: block;
    width: 36px;
    height: 3px;
    margin: 10px auto;
    content: '';
    background-color: #c7b397;
}
.pagination {
    text-align: center;
}
.pagination span {
    display: inline-block;
    color: inherit;
    font-size: 1.8rem;
}
.pagination a {
    display: inline-block;
    margin: 0 10px 0 0;
    font-size: 1.8rem;
    color: inherit;
    text-decoration: none;
}
/* お知らせ一覧ページ */
.item {
    margin: 40px auto;
}
.item-content {
    display: flex;
    border-top: 1px solid #49474c;
    border-bottom: 1px solid #49474c;
}
.item-title {
    font-size: 1.8rem;
    margin: 10px 0;
}
.item-thumb {
    width: 30%;
    margin: 0 40px 0 0;
    flex-shrink: 0;
}
.item-thumb img {
    max-width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
}
.item-body {
    flex-grow: 1;
    font-size: 1.6rem;
}
.item-body .item-title a {
    display: block;
    text-decoration: none;
    color: inherit;
}
.date {
    font-size: 1.4rem;
    margin: 0 0 20px 0;
}
p {
    font-size: 1.6rem;
}
@media screen and (max-width: 480px) {
    .item-content {
        flex-direction:column;
        padding: 20px 0;
    }
    .item-thumb {
        width: 100%;
        margin: 0 0 20px 0;
    }
    .item-title {
        font-size: 2rem;
        margin: 10px 0;
    }
    .text {
        margin: 0 0 20px 0;
    }
}
/*お知らせ・新着情報詳細ページ */
article {
    background-color: #f7f7f8;
}
.news_info-inner {
    max-width: 720px;
    width: 90%;
    margin: 0 auto;
}
.content {
    font-size: 1.6rem;
    text-align: center;
}
.content img {
    max-width: 420px;
    width: 90%;
    margin: 0 0 40px 0;
    height: auto;
}
.content p {
    margin: 0 0 40px 0;
}

/* 会社概要 */
.company-info {
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
}
.company-info th, .company-info td {
    border-bottom: 1px solid #ccc;
    padding: 20px;
    text-align: left;
    font-size: 1.6rem;
}
.company-info th:nth-of-type(1), .company-info td:nth-of-type(1) {
    border-top: 1px solid #ccc;
}
.company-info th {
    text-align: center;
    white-space: nowrap;
}
/*お問い合わせ */
section {
    background-color: #f7f7f8;
}
#contact .inner p {
    margin: 0 0 40px 0;
}
form {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f7f7f8;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

form dl {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 60px 0;
}
form dl dt {
    width: 30%;
    font-size: 1.6rem;
    font-weight: 600;
}
form dl dt label {
    margin: 0 20px 20px 0;
}
form dl dt label span {
    color: #ff0000;
}
form dl dd {
    width: 70%;
    margin-left: 0;
}

input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #49474c;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #f7f7f8;
}
input[type="submit"] {
    display: block;
    width: 40%;
    margin: 0 auto;
    padding: 10px;
    background-color: #bb6c93;;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
input[type="submit"]:hover {
    opacity: .6;
}
@media screen and (max-width: 480px) {
    form {
        width: 90%;
        margin: 0 auto;
    }
    form dl {
        flex-direction: column;
        margin: 0 0 30px 0;
    }
    form dl dt {
        width: 90%;
    }
    form dl dd {
        width: 90%;
    }

}