@charset "utf-8";

/* 
Theme Name: rano-lcc
Description: rano-lccのwpオリジナルテーマ
Version: 1.0
Author: takai
*/

/* == COLORS =============== */
:root {
    /* Color */
    --light-blue: #4db1ec;
    --blue: #1665cc;
    --purple: #b473bf;
    --pink: #ffb2c1;
    --orange: #ff9f67;
    --yellow: #ffd673;
    --lime: #60fc05;
    --light-green: #a2e29b;
    --green: #00a2af;
    --black: #000;
    --black1: #111;
    --black2: #222;
    --gray: #333;
    --gray4: #444;
    --gray5: #555;
    --gray6: #666;
    --gray7: #777;
    --gray8: #888;
    --light-gray:#999;
    --light-gray-a:#aaa;
    --light-gray-b:#bbb;
    --light-gray-c:#ccc;
    --light-gray-d:#ddd;
    --off: #ddd;
    --white: #fff;

    /* Font/Space Size */
    --font-sm: .75rem;
    --font-md: 1rem;
    --font-lg: 1.25rem;
    --font-xl: 1.625rem;
    --font-xxl: 2rem;
    
    /* Border Radius Size */
    --round-sm: 6px;
    --round-md: 10px;
    --round-lg: 50%;
}

/* ==　GENERAL =============== */
html {
    font-size: 100%;
    scroll-behavior: smooth;
}
body {
    background-color: var(--gray6);
	color: var(--off);
	font-family: "Rajdhani","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
}

/* == COMMON =============== */
p {
    line-height: 1.7;
    padding: 1rem 1rem;
}
img {
    max-width: 100%;
}
h2 {
    font-size: 2.3rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
h1,
h2 {
    text-align: center;
}
.page-header ,
h1,
h2 {
	font-family: "Rajdhani","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
    font-weight: bold;
}

li {
    list-style-type: none;
}

a {
    background-color: transparent;
    color: var(--off);
    cursor: pointer;
    text-decoration: none;

}

/* == LAYOUT =============== */
.wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

/* == HEADER =============== */
.page-header  {
    /* background: rgba(0, 0, 0, 0); */
    /* background-image: url('images/wood3.jpg'); */
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    z-index: 1;
}
.page-header  .wrapper {
    display: flex;
    justify-content: space-between;
}
.page-header  a {
    color:  var(--gray);
    font-size: 1.3rem;
}
.header-logo {
    height: 1.7rem;
}
.btn-menu {
    position: absolute;
    top: 12px;
    right: 16px;
    border: 1px solid rgba(240,240,240,0.8);
    color: var(--off);
    padding: .5rem 1rem;
}
.main-nav {
    /* background: rgba(0, 0, 0, 0); */
    /* background-image: url('../images/wood3.jpg'); */
    /* background-color: rgba(0, 0, 0, 0.7); */
    width: 0;
    position: absolute;
    z-index: 2;
    top: 64px;
    right: 0;
    overflow: hidden;
    transition: .5s;
}
.main-nav li {
    text-align: center;
    margin: 4rem 0;
    list-style: none;
}
.main-nav a {
    display: block;
}
.main-nav a:hover {
    color: var(--lime);
    transition: .3s;
}
.main-nav.open-menu {
    width: 100%;
    background: rgba(72, 249, 2, 0.8);
}

/* == HERO =============== */
#hero {
    background-color: var(--gray);
    /* background-image: url('images/work_04-kai3.jpg'); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-blend-mode: darken;
    animation: bg-color 25s infinite;
    height: 90vh;
    display: flex;
    align-items: center;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

#hero h1 {
    font-size: 1.8rem;
    line-height: 2;
    color: var(--lime);
    text-shadow:1px 1px 0 var(--gray), -1px -1px 0 var(--gray),
                -1px 1px 0 var(--gray), 1px -1px 0 var(--gray),
                0px 1px 0 var(--gray),  0-1px 0 var(--gray),
                -1px 0 0 var(--gray), 1px 0 0 var(--gray);
    margin-bottom: 3rem;
}

/* @keyframes bg-color {
    0% { background-color: var(--gray8); }
    12.5% { background-color: var(--gray6); }
    25% { background-color: var(--gray4); }
    37.5% { background-color: var(--black2); }
    50% { background-color: var(--black); }
    62.5% { background-color: var(--black2); }
    75% { background-color: var(--gray4); }
    87.5% { background-color: var(--gray6); }
    100% { background-color: var(--gray8); }
} */
/* @keyframes bg-color {
    0% { background-color: var(--black1); }
    12.5% { background-color: var(--gray); }
    25% { background-color: var(--gray5); }
    37.5% { background-color: var(--gray7); }
    50% { background-color: var(--light-gray); }
    62.5% { background-color: var(--gray7); }
    75% { background-color: var(--gray5); }
    87.5% { background-color: var(--gray); }
    100% { background-color: var(--black1); }
} */
/* @keyframes bg-color {
    0% { background-color: var(--black); }
    12.5% { background-color: var(--black1); }
    25% { background-color: var(--black2); }
    37.5% { background-color: var(--gray); }
    50% { background-color: var(--gray4); }
    62.5% { background-color: var(--gray); }
    75% { background-color: var(--black2); }
    87.5% { background-color: var(--black1); }
    100% { background-color: var(--black); }
} */
/* @keyframes bg-color {
    0% { background-color: var(--light-blue); }
    12.5% { background-color: var(--blue); }
    25% { background-color: var(--purple); }
    37.5% { background-color: var(--pink); }
    50% { background-color: var(--orange); }
    62.5% { background-color: var(--yellow); }
    75% { background-color: var(--light-green); }
    87.5% { background-color: var(--green); }
    100% { background-color: var(--light-blue); }
} */

/* #particle-wrapper{
    display:flex;
    justify-content: center;
    align-items: center;
} */
 /*描画されるテキストを中央寄せにする*/
    
/* #particle{
    width:100%;
    height: 100vh;
    vertical-align: bottom;
} */
/*canvasタグ下に余白が生まれるのを防ぐ*/

#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%;
}


/* == ABOUT =============== */
#about {
    padding: 4rem 1rem;
}
#about h2 {
    line-height: 2;
    color: var(--off);
    /* text-shadow:1px 1px 0 var(--white), -1px -1px 0 var(--white),
                -1px 1px 0 var(--white), 1px -1px 0 var(--white),
                0px 1px 0 var(--white),  0-1px 0 var(--white),
                -1px 0 0 var(--white), 1px 0 0 var(--white); */
    border-bottom: 5px dotted var(--lime);
    margin-bottom: 3rem;
}
#about h3{
    line-height: 4;
    color: var(--off);
    text-align: center;
}
#about p {
    margin-bottom: 2rem;
}
.about-logo {
    text-align: center;
    width: 100%;
    margin: 5rem auto 5rem auto;
    display: block;
}

/* == CONCEPT =============== */
#concept {
    background: var(--gray);
    /* background: linear-gradient(to left, var(--light-gray), var(--gray)); */
    /* background-image: url('images/wood3.jpg'); */
    padding: 7rem 1rem;
    -webkit-clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
    clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
}
#concept h2 {
    line-height: 2;
    color: var(--off);
    /* text-shadow:1px 1px 0 var(--gray), -1px -1px 0 var(--gray),
                -1px 1px 0 var(--gray), 1px -1px 0 var(--gray),
                0px 1px 0 var(--gray),  0-1px 0 var(--gray),
                -1px 0 0 var(--gray), 1px 0 0 var(--gray); */
    border-bottom: 5px dotted var(--lime);
    margin-bottom: 3rem;
}
.concept-img {
    text-align: center;
    width: 100%;
    margin: 5rem auto 2rem auto;
    display: block;
}
#concept h3{
    line-height: 2;
    color: var(--off);
    text-align: center;
}
.main-concept-english {
    font-size: 2rem;
    line-height: 2;
    color: var(--off);
    text-align: center;
}
.main-concept-japanese {
    font-size: 1rem;
    line-height: 2;
    color: var(--off);
    text-align: center;
    margin-bottom: 2rem;
}
#concept p {
    /* text-align: center; */
    margin-bottom: 4rem;
    color: var(--off);
}
.concept-table {
    color: var(--off);
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 4rem;
}
/* .concept-table tr {
    border-bottom: 1px solid rgb(153, 153, 153, 0.85);
} */
.concept-table td {
    display: block;
    line-height: 1.5;
}
.concept-list-title {
    padding: 1rem 0 2rem 2rem;
    font-size: 1rem;
}
.concept-english {
    font-size: .875rem;
    padding: 1rem 0 0 2rem;
}
.concept-japanese {
    padding: 0 0 1rem 2rem;
}
#concept a {
    color: var(--off);
    /* ↓ハイパーリンクに半透明なアンダーラインを引くCSS */
    text-decoration: underline;
    text-underline-offset: -0.2em;
    text-decoration-thickness: 0.5em;
    text-decoration-color: rgba(72, 249, 2, 0.5);
    text-decoration-skip-ink: none;
}
#concept a:hover {
    color: var(--lime);
    transition: .3s;
}

/* == DESIGNER =============== */
#designer {
    padding: 4rem 1rem;
}
#designer h2 {
    line-height: 2;
    color: var(--off);
    /* text-shadow:1px 1px 0 var(--white), -1px -1px 0 var(--white),
                -1px 1px 0 var(--white), 1px -1px 0 var(--white),
                0px 1px 0 var(--white),  0-1px 0 var(--white),
                -1px 0 0 var(--white), 1px 0 0 var(--white); */
    border-bottom: 5px dotted var(--lime);
    margin-bottom: 3rem;
}
#designer img {
    text-align: center;
    margin: 5rem auto 2rem auto;
    display: block;
    border-radius: 50%;
    width: 200px;
}
.designer-list {
    margin-bottom: 2rem;
}
.designer-text {
    margin-left: 1rem;
}
#designer h3 {
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
    border-bottom: 3px double var(--light-gray);
}
.designer-text a {
    /* ↓ハイパーリンクに半透明なアンダーラインを引くCSS */
    text-decoration: underline;
    text-underline-offset: -0.2em;
    text-decoration-thickness: 0.5em;
    text-decoration-color: rgba(72, 249, 2, 0.5);
    text-decoration-skip-ink: none;
}
.designer-text a:hover {
    color: var(--lime);
    transition: .3s;
}

/* INFORMATION */
#information {
    background: var(--gray);
    /* background: linear-gradient(to right, var(--light-gray), var(--gray)); */
    /* background-image: url('images/wood3.jpg'); */
    padding: 7rem 1rem 4rem;
    -webkit-clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
}
#information h2 {
    line-height: 2;
    color: var(--off);
    /* text-shadow:1px 1px 0 var(--gray), -1px -1px 0 var(--gray),
                -1px 1px 0 var(--gray), 1px -1px 0 var(--gray),
                0px 1px 0 var(--gray),  0-1px 0 var(--gray),
                -1px 0 0 var(--gray), 1px 0 0 var(--gray); */
    border-bottom: 5px dotted var(--lime);
    margin-bottom: 3rem;
}
.information-img {
    text-align: center;
    width: 100%;
    margin: 5rem auto 2rem auto;
    display: block;
}
#information h3{
    line-height: 2;
    color: var(--off);
    text-align: center;
}
.information-table {
    width: 100%;
    /* max-width: 544px; */
    margin: auto;
    color: var(--off);
    padding: 2rem 1rem;
    border-spacing: 0;
}
.information-table th,
.information-table td {
    border-bottom: 1px solid var(--off);
}
.information-table th {
    text-align: left;
    font-weight: bold;
    padding: 1rem 1rem 1rem 0;
}
.information-table td {
    padding: 1rem 0 1rem 1rem;
} 

/* == FOOTER =============== */
.page-footer {
    /* background: rgba(0, 0, 0, 0); */
    /* background-image: url('images/wood3.jpg'); */
    background-color: rgba(0, 0, 0, 1);
    padding: 6rem 1rem 2rem;
    padding-top: 2rem;
    text-align: center;
    font-size: .875rem;
    color: var(--off);
}


/* ==================== 別ページ =================================== */

/* == WORKS =============== */
#works {
    padding: 4rem 0 0 0;
    background: var(--gray);
    /* background: linear-gradient(var(--gray), var(--off)); */
}
#works-text {
    background: var(--gray);
    color: var(--off);
}
#works h2 {
    line-height: 2;
    color: var(--off);
    /* text-shadow:1px 1px 0 var(--gray6), -1px -1px 0 var(--gray6),
                -1px 1px 0 var(--gray6), 1px -1px 0 var(--gray6),
                0px 1px 0 var(--gray6),  0-1px 0 var(--gray6),
                -1px 0 0 var(--gray6), 1px 0 0 var(--gray6); */
    border-bottom: 5px dotted var(--lime);
    margin-bottom: 3rem;
}
#works h3{
    font-size: 1.5rem;
    line-height: 1.7;
    color: var(--gray);
    /* -webkit-text-stroke: 0.3px var(--off); */
    text-shadow:0.3px 0.3px 0 var(--off), -0.3px -0.3px 0 var(--off),
                -0.3px 0.3px 0 var(--off), 0.3px -0.3px 0 var(--off),
                0px 0.3px 0 var(--off),  0-0.3px 0 var(--off),
                -0.3px 0 0 var(--off), 0.3px 0 0 var(--off);
    text-align: center;
    margin-top: 1rem;
    /* margin-bottom: 2rem; */
}
#works p {
    color: var(--off);
    margin-bottom: 2rem;
}
.works-img {
    text-align: center;
    width: 100%;
    margin: 4rem auto 6rem auto;
    display: block;
}
.works-menu-home {
    background-image: url('images/wood3.jpg');
    background-repeat:repeat;
    padding: 2rem 0;
}
.works-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 2rem 1rem;
    text-align: center;
    /* margin: 2rem 0 ; */
    list-style: none;
    /* border-top: 6mm ridge rgb(153, 153, 153, 0.6);
    border-bottom: 6mm ridge rgb(153, 153, 153, 0.6); */
}
.works-nav li {
    background: var(--gray);
    font-size: var(--font-md);
    border-radius: var(--round-sm);
    padding: .5rem;
    border: 1px solid var(--off);
}
.works-nav a {
    color: var(--off);
    display: block;
    font-weight: bold;
}
.works-nav a:hover {
    color: var(--lime);
    transition: .3s;
}

/* == BLOG =============== */
#blog {
    padding: 4rem 0 0 0;
    background: var(--gray6);
    /* background: linear-gradient(var(--off), var(--gray)); */
}
#blog-text {
    background: var(--gray6);
    color: var(--off);
}
#blog h2 {
    line-height: 2;
    color: var(--off);
    /* text-shadow:1px 1px 0 var(--white), -1px -1px 0 var(--white),
                -1px 1px 0 var(--white), 1px -1px 0 var(--white),
                0px 1px 0 var(--white),  0-1px 0 var(--white),
                -1px 0 0 var(--white), 1px 0 0 var(--white); */
    border-bottom: 5px dotted var(--lime);
    margin-bottom: 3rem;
}
#blog h3{
    font-size: 1.7rem;
    line-height: 1.5;
    color: var(--gray);
    /* text-shadow:0.3px 0.3px 0 var(--gray), -0.3px -0.3px 0 var(--gray),
                -0.3px 0.3px 0 var(--gray), 0.3px -0.3px 0 var(--gray),
                0px 0.3px 0 var(--gray),  0-0.3px 0 var(--gray),
                -0.3px 0 0 var(--gray), 0.3px 0 0 var(--gray); */
    text-align: center;
    margin-top: 1rem;
    /* margin-bottom: 2rem; */
}
#blog p {
    margin-bottom: 2rem;
    color: var(--gray);
}
.blog-img {
    text-align: center;
    width: 100%;
    margin: 4rem auto 6rem auto;
    display: block;
}
.blog-menu-home {
    background: var(--light-gray);
    /* background-image: url('images/wood3.jpg'); */
    background-repeat:repeat;
    padding: 2rem 0;
}
.blog-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 2rem 1rem;
    text-align: center;
    /* margin: 2rem 0 ; */
    list-style: none;
    /* border-top: 6mm ridge rgb(153, 153, 153, 0.6);
    border-bottom: 6mm ridge rgb(153, 153, 153, 0.6); */
}
.blog-nav li {
    background: var(--gray6);
    font-size: var(--font-md);
    border-radius: var(--round-sm);
    padding: .5rem;
    border: 1px solid var(--off);
}
.blog-nav a {
    color: var(--off);
    display: block;
    font-weight: bold;
}
.blog-nav a:hover {
    color: var(--lime);
    transition: .3s;
}

/* POST */
#works .post-list,
#blog .post-list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    margin-top: 6rem;
    margin-bottom: 4rem;
}
#works .post-item {
    background: var(--gray);
    /* background: linear-gradient(to left, var(--light-gray), var(--gray)); */
    border-radius: var(--round-md);
    border: 1px solid var(--off);
    position: relative;
}
#blog .post-item {
    background: var(--light-gray);
    border-radius: var(--round-md);
    border: 1px solid var(--off);
    position: relative;
}
.post-item .wp-post-image {
    border-radius: var(--round-md) var(--round-md) 0 0;
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.post-header {
    padding: 1rem;
}
#works .post-title a {
    color: var(--off);
    margin-bottom: .5rem;
    line-height: 1.5;
    word-break: break-word;
}
#blog .post-title a {
    color: var(--gray);
    margin-bottom: .5rem;
    line-height: 1.5;
    word-break: break-word;
}
#works .post-title a:hover {
    color: var(--lime);
    transition: .3s;
}
#blog .post-title a:hover {
    color: var(--lime);
    transition: .3s;
}
#works .post-date {
    color: var(--off);
    font-size: var(--font-sm);
}
#blog .post-date {
    color: var(--gray);
    font-size: var(--font-sm);
}
.post-categories {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
#works .post-categories li {
    background: var(--gray);
    /* background: linear-gradient(to left, var(--light-gray), var(--gray)); */
    font-size: var(--font-sm);
    border-radius: var(--round-sm);
    padding: .3rem;
}
#blog .post-categories li {
    background: var(--light-gray-c);
    font-size: var(--font-sm);
    border-radius: var(--round-sm);
    padding: .3rem;
}
#works .post-categories li a {
    color: var(--off);
}
#blog .post-categories li a {
    color: var(--gray);
}
#works .post-categories li a:hover {
    color: var(--lime);
    transition: .3s;
}
#blog .post-categories li a:hover {
    color: var(--lime);
    transition: .3s;
}

/* Post navigation */
.nav-links {
    /* background: var(--gray); */
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 0 0 4rem 0;
}
#works .nav-links a{
    padding: .75rem 1rem .85rem;
    background: var(--black);
    border-radius: var(--round-sm);
    color: var(--off);
    border: 1px solid var(--off);
    /* box-shadow: 2px rgba(0, 0, 0, 0.8); */
    /* box-shadow: 0 4px 10px rgba(123, 186, 147, .6); */
}
#blog .nav-links a{
    padding: .75rem 1rem .85rem;
    background: var(--light-gray-c);
    border-radius: var(--round-sm);
    color: var(--gray);
    border: 1px solid var(--gray);
    /* box-shadow: 2px rgba(0, 0, 0, 0.8); */
    /* box-shadow: 0 4px 10px rgba(123, 186, 147, .6); */
}
#works .nav-links a:hover {
    color: var(--lime);
    transition: .3s;
}
#blog .nav-links a:hover {
    color: var(--lime);
    transition: .3s;
}

.back-button {
    /* background: var(--gray); */
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 0 0 4rem 0;
}
#works-text .back-button a{
    padding: .75rem 1rem .85rem;
    background: var(--black);
    border-radius: var(--round-sm);
    color: var(--off);
    border: 1px solid var(--off);
    /* box-shadow: 2px rgba(0, 0, 0, 0.8); */
    /* box-shadow: 0 4px 10px rgba(123, 186, 147, .6); */
}
#blog-text .back-button a{
    padding: .75rem 1rem .85rem;
    background: var(--light-gray-c);
    border-radius: var(--round-sm);
    color: var(--gray);
    border: 1px solid var(--gray);
    /* box-shadow: 2px rgba(0, 0, 0, 0.8); */
    /* box-shadow: 0 4px 10px rgba(123, 186, 147, .6); */
}
#works-text .back-button a:hover {
    color: var(--lime);
    transition: .3s;
}
#blog-text .back-button a:hover {
    color: var(--lime);
    transition: .3s;
}

/* Archive */
#works .page-title {
    color: var(--off);
    font-size: var(--font-lg);
    margin-top: 4rem;
    margin-bottom: 4rem;
    text-align: center;
    font-weight: normal;
}
#blog .page-title {
    color: var(--gray);
    font-size: var(--font-lg);
    margin-top: 4rem;
    margin-bottom: 4rem;
    text-align: center;
    font-weight: normal;
}

/* SINGLE */
.single .post-list {
    grid-template-columns: repeat(1, 1fr);
}
.single .post-title {
    font-size: var(--font-xl);
}
.single .post-header {
    padding: 6rem 1rem 4rem ;
}
.single .post-date {
    font-size: var(--font-md);
    margin-top: 1rem;
    text-align: center;
    font-weight: normal;
}
.single .wp-post-image + .post-header{
    padding-top: 1rem;
}
.single .post-content {
    padding-bottom: 4rem;
}
#works-text .post-content a {
    color: var(--off);
    text-decoration: underline;
    text-underline-offset: -0.2em;
    text-decoration-thickness: 0.5em;
    text-decoration-color: rgba();
    text-decoration-skip-ink: none;
}
#blog-text .post-content a {
    color: var(--off);
    text-decoration: underline;
    text-underline-offset: -0.2em;
    text-decoration-thickness: 0.5em;
    text-decoration-color: rgba(72, 249, 2, 0.5);
    text-decoration-skip-ink: none;
}
#works-text .post-content a:hover {
    color: var(--lime);
    transition: .3s;
}
#blog-text .post-content a:hover {
    color: var(-lime);
    transition: .3s;
}
.post-content h1 {
    font-size: var(--font-xxl);
    margin: 2rem;
}
.post-content h2 {
    font-size: var(--font-xl);
    margin: 1.75rem;
}
.post-content h3 {
    font-size: var(--font-lg);
    margin: 1.5rem;
}
.post-content h4,
.post-content h5,
.post-content h6 {
    font-weight: bold;
}
.post-content h4,
.post-content h5,
.post-content h6,
.post-content p,
.post-content ul,
.post-content ol,
.post-content figure,
.post-content blockquote,
.post-content pre {
    margin-bottom: 1rem;
}
.post-content figcaption {
    font-size: var(--font-sm);
    text-align: center;
}
.post-content img {
    margin-bottom: .5rem;
    height: auto;
}
.post-content .wp-block-image:not(.is-style-rounded) img {
    border-radius: var(--round-md);
}
/* ---------------------- ここから */
.post-content ul,
.post-content ol {
    padding-left: 2rem;
}
.post-content ul {
    list-style: square;
}
.post-content ol {
    list-style: decimal;
}
.post-content li {
    line-height: 1.5;
}
.post-content li::marker {
    color: var(--lime);
}
.post-content blockquote {
    background: #eee;
    padding: 1rem 1rem .25rem 2rem;
    border-radius: var(--round-md);
    position: relative;
}
.post-content blockquote::before {
    content: '“';
    position: absolute;
    font-size: 3rem;
    color: var(--light-grey);
    top: 0;
    left: 8px;
}
.post-content blockquote cite {
    margin-bottom: 1.5rem;
    display: inline-block;
}
.post-content code,
.post-content kbd {
    background: #eee;
    padding: 3px;
    border-radius: 3px;
    margin: 0 3px;
}
/* ここまではwpで都度検証が必要 ---------------------- */
.post-footer {
    padding-bottom: 2rem;
    /* margin-bottom: 4rem; */
}

/* == BUSINESS =============== */
#business {
    padding: 4rem 1rem 1rem 1rem;
    background: var(--gray);
    /* background: linear-gradient(to left, var(--light-gray), var(--gray)); */
}
#business h2 {
    line-height: 2;
    color: var(--off);
    /* text-shadow:1px 1px 0 var(--white), -1px -1px 0 var(--white),
                -1px 1px 0 var(--white), 1px -1px 0 var(--white),
                0px 1px 0 var(--white),  0-1px 0 var(--white),
                -1px 0 0 var(--white), 1px 0 0 var(--white); */
    border-bottom: 5px dotted var(--lime);
    margin-bottom: 3rem;
}
#business h3{
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--off);
    text-align: center;
    margin-bottom: 2rem;
}
#business h4{
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--off);
    margin-bottom: 1rem;
}
#business h5{
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--gray8);
    margin-bottom: 4rem;
    font-weight: normal;
}
/* #business h5 a {
    color: var(--gray);
    text-decoration: underline;
    text-underline-offset: -0.2em;
    text-decoration-thickness: 0.5em;
    text-decoration-color: rgba(250, 139, 42, 0.5);
    text-decoration-skip-ink: none;
}
#business h5 a:hover {
    color: var(--orange);
    transition: .3s;
} */
#business p {
    padding: 0 1rem;
    /* margin-bottom: 2rem; */
}
.business-img {
    text-align: center;
    width: 100%;
    margin: 4rem auto 6rem auto;
    display: block;
}

/* wp-business */
#wp-business {
    padding: 0 1rem 4rem 1rem;
    background: var(--gray);
    /* background: linear-gradient(to left, var(--light-gray), var(--gray)); */
}
#wp-business .wp-block-group {
    box-sizing: border-box;
    margin: 2rem 0;
}
.wp-block-table.aligncenter, 
.wp-block-table.alignleft, 
.wp-block-table.alignright {
    display: block;
    width: auto;
}
#wp-business h3, h4, h5, h6 {
    padding: 0.5rem;
}
#wp-business p.has-background {
    padding: 0.5rem;
}
#wp-business a {
    color: var(--off);
    /* ↓ハイパーリンクに半透明なアンダーラインを引くCSS */
    text-decoration: underline;
    text-underline-offset: -0.2em;
    text-decoration-thickness: 0.5em;
    text-decoration-color: rgba(72, 249, 2, 0.5);
    text-decoration-skip-ink: none;
}
#wp-business a:hover {
    color: var(--lime);
    transition: .3s;
}

/* == CONTACT =============== */
#contact {
    padding: 4rem 1rem;
    background: var(--gray6);
}
#contact h2 {
    line-height: 2;
    color: var(--off);
    /* text-shadow:1px 1px 0 var(--white), -1px -1px 0 var(--white),
                -1px 1px 0 var(--white), 1px -1px 0 var(--white),
                0px 1px 0 var(--white),  0-1px 0 var(--white),
                -1px 0 0 var(--white), 1px 0 0 var(--white); */
    border-bottom: 5px dotted var(--lime);
    margin-bottom: 3rem;
}
#contact h3{
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--off);
    text-align: center;
    margin-bottom: 2rem;
}
#contact h4{
    font-size: 1rem;
    line-height: 1.5;
    color: var(--off);
    margin-bottom: 1rem;
}
#contact h5{
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--light-gray);
    margin-bottom: 4rem;
    font-weight: normal;
}
#contact h5 a {
    color: var(--off);
    text-decoration: underline;
    text-underline-offset: -0.2em;
    text-decoration-thickness: 0.5em;
    text-decoration-color: rgba(72, 249, 2, 0.5);
    text-decoration-skip-ink: none;
}
#contact h5 a:hover {
    color: var(--lime);
    transition: .3s;
}
#contact p {
    padding: 0 1rem;
    /* margin-bottom: 2rem; */
}
.contact-img {
    text-align: center;
    width: 100%;
    margin: 4rem auto 6rem auto;
    display: block;
}

/* CONTACT FORM7 */
.cf7__list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 4rem;
}

.cf7__list dt:nth-of-type(n + 2){
    margin-top: 30px;
}

.cf7__list dd:nth-of-type(n + 2) {
    margin-top: 0;
}

.cf7__list dt {
    width: 100%;
    margin-bottom: 15px;
    padding-top: 0;
}

.cf7__list dd {
    width: 100%;
}
  
/* 必須・任意 */
.cf7__required,
.cf7__optional {
    margin-right: 15px;
    padding: 6px 14px;
    color: var(--gray);
    font-size: 12px;
    vertical-align: 1px;
}
  
.cf7__required {
    background: var(--lime);
    border-radius: var(--round-sm);
}
  
.cf7__optional {
    background: var(--light-gray-c);
    border-radius: var(--round-sm);
}
  
/* input・textarea */
.cf7__list dd input[type="text"],
.cf7__list dd input[type="tel"],
.cf7__list dd input[type="email"],
.cf7__list dd textarea {
    width: 100%;
    padding: 15px 20px;
    background: #F4F4F4;
}
  
/* ドロップダウンメニュー */
.cf7__select {
    position: relative;
}
  
.cf7__select:before {
    position: absolute;
    top: 50%;
    right: 20px;
    z-index: 10;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid var(--black);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    pointer-events: none;
    content: '';
}
  
.cf7__select select {
    width: 100%;
    padding: 19px 20px;
    background: #F4F4F4;
    color: var(--gray);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
  
/* チェックボックス・ラジオボタン */
/* .cf7__list dd .wpcf7-checkbox,
.cf7__list dd .wpcf7-radio {
    padding: 15px 0 0;
} */
  
/* 縦並び（チェックボックス・ラジオボタン） */
/* .cf7__list dd .wpcf7-list-item {
    display: block;
    margin: 0;
} */
  
.cf7__list dd .wpcf7-list-item:nth-child(n + 2) {
    margin-top: 18px;
}
  
/* マウスカーソル（チェックボックス・ラジオボタン） */
/* .cf7__list dd .wpcf7-list-item label {
    cursor: pointer;
} */
  
/* チェックボックス・ラジオボタン */
/* input[type="checkbox"],
input[type="radio"] {
    position: relative;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    border: 1px solid #bcbcbc;
    vertical-align: -3px;
    cursor: pointer;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
} */
  
/* チェックボックス */
/* input[type="checkbox"]:checked {
    border: 1px solid #000;
    background: #000;
} */
  
input[type="checkbox"]:checked:before {
    position: absolute;
    top: 2px;
    left: 5px;
    transform: rotate(50deg);
    width: 6px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    content: '';
}
  
/* ラジオボタン */
input[type="radio"] {
    border-radius: 50%;
}
  
input[type="radio"]:checked:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gray);
    content: '';
}
  
/* プレースホルダー */
/* Google Chrome / Safari / Mozilla Firefox / Opera */
.cf7__list dd input[type="text"]::placeholder,
.cf7__list dd input[type="tel"]::placeholder,
.cf7__list dd input[type="email"]::placeholder,
.cf7__list dd textarea::placeholder {
    color: #a5a5a5;
}
  
/* Microsoft Edge */
.cf7__list dd input[type="text"]::-ms-input-placeholder,
.cf7__list dd input[type="tel"]::-ms-input-placeholder,
.cf7__list dd input[type="email"]::-ms-input-placeholder,
.cf7__list dd textarea::-ms-input-placeholder {
    color: #a5a5a5;
}
  
/* Internet Explorer */
.cf7__list dd input[type="text"]:-ms-input-placeholder,
.cf7__list dd input[type="tel"]:-ms-input-placeholder,
.cf7__list dd input[type="email"]:-ms-input-placeholder,
.cf7__list dd textarea:-ms-input-placeholder {
    color: #a5a5a5;
}
  
/* 送信ボタン */
.cf7__button {
    /* ↓ 送信ボタンの横のspinnerを有効にする場合の余白 */
    /* padding-left: 72px; */
    text-align: center;
}

input[type="submit"] {
    padding: 1rem 2rem 1rem;
    background: var(--light-gray-c);
    border-radius: var(--round-sm);
    color: var(--gray);
    border: 1px solid var(--gray);
    font-size: 1rem;
    font-weight: bold;
    /* transition: opacity .6s; */
}
input[type="submit"]:hover {
    color: var(--lime);
    transition: .3s;
    /* opacity: .6; */
}
  
/* ajax-loader */
.wpcf7-spinner {
    /* ↓ 送信ボタンの横のアニメーション（有効にする場合、buttonの72pxの余白を入れる） */
    /* vertical-align: middle; */
    display: none!important;
}
  

.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: var(--gray);
    border-style: double;
    text-align: center;
}




/* =============== DESKTOP SIZE =============== */
@media (min-width: 800px) {
/* Common */
    p {
        line-height: 1.7;
        padding: 1rem 1rem;
    }
    h2 {
        font-size: 3rem;
    }
    h3 {
        font-size: 1.5rem;
    }
    .wrapper{
        padding: 0 2rem;
    }

/* Header */
    .btn-menu {
        display: none;
    }
    .main-nav {
        width: 100%;
        position: static;
        display: flex;
    }
    .main-nav li {
        margin: 0 0 0 2rem;
    }
    .page-header  a {
        color:  var(--off);
        font-size: 1.3rem;
    }
    .page-header  a:hover {
        color: var(--lime);
        transition: .3s;
    }
    .main-nav.open-menu {
        background: rgba(0, 0, 0, 0);
    }

/* Hero */
    #hero {
    height: 100vh;
    }
    #hero h1 {
        font-size: 2.5rem;
    }

/* About */
    #about p {
        margin-left: 2rem;
        margin-right: 2rem;
    }

/* Concept */
    .concept-table td {
        display: table-cell;
    }
    .concept-list-title {
        padding: 1rem 0 2rem 4rem;
        font-size: 1.1rem;
    }
    .concept-english {
        font-size: 1.25rem;
        padding: 1rem 0 1rem 4rem;
    }
    .concept-japanese {
        font-size: 1.1rem;
        padding: 1rem 4rem 1rem 2.5rem;
    }

/* Designer */
    #designer h2 {
        margin-bottom: 4rem;
    }
    .designer-list {
        display: flex;
        align-items: flex-start;
        margin-bottom: 5rem;
        margin-right: 2rem;
    }
    .designer-text {
        margin-left: 2rem;
    }

/* Infomation */
    .information-table {
        font-size: 1.1rem;
        padding: 1rem 4rem 1rem 4rem;
    }

/* Footer */
    .page-footer {
        font-size: 1.25rem;
    }

/* =====別ページ=====  */
/* Works */
    #works p {
        margin-left: 2rem;
        margin-right: 2rem;
    }
    #works .post-list {
        grid-template-columns: repeat(3, 1fr);
    }
    .works-nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    .works-nav li {
        font-size: var(--font-lg);
    }

/* Blog */
    #blog p {
        margin-left: 2rem;
        margin-right: 2rem;
    }
    #blog .post-list {
        grid-template-columns: repeat(3, 1fr);
    }
    .blog-nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    .blog-nav li {
        font-size: var(--font-lg);
    }

/* Archive */
    /* .page-title {
        font-size: var(--font-xl);
    } */

/* Contact */
    /* #contact p {
        margin-left: 2rem;
        margin-right: 2rem;
    } */

/* Contact fome7 */
    .cf7__list dt {
        width: 35%;
        padding-top: 15px;
    }
    .cf7__list dd {
        width: 65%;
    }
    .cf7__list dd:nth-of-type(n + 2) {
        margin-top: 30px;
    }
    /* .cf7__list dd .wpcf7-checkbox,
    .cf7__list dd .wpcf7-radio {
    display: block;
    padding: 15px 0 10px;
    } */

    /* 送信ボタン */
    input[type="submit"] {
        padding: 1rem 4rem 1rem;
    }
}