@charset "utf-8";


/*--------------------------------------------
■［WEBフォント］
--------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');


/*--------------------------------------------
■［変数］
--------------------------------------------*/
:root {
    --color-def: #333;
    --color-mute: #808080;
    --color-red1: #C60113;
    --color-key1: #C60113;
    --color-lkey1: #fbeced;
    --color-beige1: #d4c5c5;
    --color-lbeige1: #faf8f5;
    --color-gray1: #2e2e2e;
    --color-gray2: #4e4e4e;
    --color-lgray1: #F2F2F2;
    --color-lgray2: #E5E5E5;
    --color-lred1: #fbeced;
    --color-black: #000;
    --color-white: #fff;
    --color-line-01: #ccc9c6;
    --color-base-01: #f5f1e9;
    --color-base-02: #f2eee9;
    --color-black-2: #3b3d3d;

    --font-ja: "Noto Sans JP", sans-serif;
}

/*--------------------------------------------
■［表示／非表示］
--------------------------------------------*/

.pc-view {
    display: inherit !important;
}
.sp-view {
    display: none !important;
}

.hide {
    display: none !important;
}

/*--------------------------------------------
■［main］
--------------------------------------------*/

main {
    padding: calc(104px + 1.5vw) 1.5vw 1.5vw 1.5vw;
    background-color: var(--color-lbeige1);
    letter-spacing: 0.05em;
}
main div#title {
    display: flex;
    gap: 30px;
    align-items: center;
    padding-bottom: 1vw;
}
main div#title h1 {
    font-size: 35px;
    text-align: center;
    display: flex;
    gap: 10px;
    align-items: center;
    line-height: 0;
    width: 310px;
}
main div#title h1 span {
    font-size: 0.9em;
    display: flex;
    align-items: end;
}
main div#title h1 img.icon {
    width: 54px;
    height: 46px;
    vertical-align: middle;
}
main div#title.detail h1 + p {
    margin-left: auto;
}
section#works {
    height: calc(100dvh - 208px);
    overflow: hidden;
    display: flex;
    gap: 30px;
    font-size: 14px;
}
section#works * {
    box-sizing: border-box;
}
section#works img {
    max-width: 100%;
    vertical-align: bottom;
}
section#works nav#sidenavi {
    height: 100%;
    position: relative;
    width: 310px;
}
section#works nav#sidenavi h1 {
    font-size: 2em;
    letter-spacing: 0.1em;
    line-height: 1;
    padding: 0.5rem 0 1.5rem 0;
    font-weight: 500;
}
section#works nav#sidenavi div#keywordSearch {
    padding-bottom: 1.5rem;
}
section#works nav#sidenavi div#keywordSearch form {
    display: flex;
}
section#works nav#sidenavi div#keywordSearch form input {
    padding: 0.75em;
    border-radius: 0.4em 0 0 0.4em;
    border: 2px solid var(--color-beige1);
    border-right: none;
    font-size: 100%;
    line-height: 1;
    width: calc(100% - 40px);
    background-color: var(--color-white);
}
section#works nav#sidenavi div#keywordSearch form button {
    padding: 1em;
    border-radius: 0 0.4em 0.4em 0;
    border: 2px solid var(--color-beige1);
    background-color: var(--color-white);
    border-left: none;
    font-size: 100%;
    line-height: 1;
    padding: 0;
    width: 40px;
    text-align: center;
    color: var(--color-key1);
    cursor: pointer;
}
div#title i.material-symbols-outlined,
section#works i.material-symbols-outlined {
    line-height: 1;
    vertical-align: middle;
    margin-top: -0.2em;
    font-size: 1.4em;
}
section#works nav#sidenavi div#filter {
    border: 2px solid var(--color-beige1);
    background-color: transparent;
    border-radius: 0.3em;
}
section#works nav#sidenavi div#filter h3 {
    font-size: 1.26em;
    padding: 1.5rem 0.75rem;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
}
section#works nav#sidenavi div#filter h3 > i {
    color: var(--color-key1);
    margin-right: 0.2em;
    margin-top: 0;
}
section#works nav#sidenavi div#filter h3 button {
    font-size: 0.76rem;
    margin-left: auto;
    padding: 0.3em 0.6em;
}
section#works nav#sidenavi div#filter div#filterConditions {
    overflow-y: auto;
    scrollbar-width: thin;
}
section#works nav#sidenavi div#filter div#filterConditions h4 {
    background-color: var(--color-gray2);
    color: var(--color-white);
    padding: 0.7em;
    padding-right: 2em;
    font-size: 1.1em;
    position: relative;
    cursor: pointer;
    transition: .5s;
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1;
}
section#works nav#sidenavi div#filter div#filterConditions ul + h4 {
    margin-top: 1px;
}
section#works nav#sidenavi div#filter div#filterConditions h4:hover {
    filter: brightness(1.2);
}
section#works nav#sidenavi div#filter div#filterConditions h4 > i {
    margin-right: 0.3em;
    margin-top: 0.1em;
}
section#works nav#sidenavi div#filter div#filterConditions h4:after {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    position: absolute;
    right: 0.5em;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 1em;
    height: 1em;
    line-height: 1;
    content: "\e644";
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
section#works nav#sidenavi div#filter div#filterConditions h4.close:after {
    content: "\e147";
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
section#works nav#sidenavi div#filter div#filterConditions h4 button[name="reset"] {
    margin-left: auto;
    padding: 0.3em 0.6em;
    letter-spacing: 0;
    font-size: 0.76em;
    z-index: 1;
    cursor: pointer;
}
section#works nav#sidenavi div#filter div#filterConditions ul {
    display: flex;
    /*gap: 7px;*/
    gap: 5px 10px;
    flex-wrap: wrap;
    padding: 10px 10px 20px 10px;
    /*overflow-y: auto;
    scrollbar-width: thin;
    max-height: 25dvh;*/
    /*transition: .5s;*/
}
section#works nav#sidenavi div#filter div#filterConditions ul li {
}
section#works nav#sidenavi div#filter div#filterConditions ul.blank {
    padding: 0 10px;
    display: none;
}
section#works nav#sidenavi div#filter div#filterConditions ul > li {
    width: 100%;
}
section#works nav#sidenavi div#filter div#filterConditions ul.c2 > li {
    width: calc(100% / 2 - ((10px * 1) / 2));
}
section#works nav#sidenavi div#filter div#filterConditions ul.c3 > li {
    width: calc(100% / 3 - ((10px * 2) / 3));
}
section#works nav#sidenavi div#filter div#filterConditions h4.close + ul > li,
section#works nav#sidenavi div#filter div#filterConditions h4.close + ul > li[data-checked=""] {
    display: none;
}
section#works nav#sidenavi div#filter div#filterConditions h4.close + ul > li[data-checked="1"] {
    display: block;
}
section#works label {
    display: inline-block;
}
section#works label input[type="radio"],
section#works label input[type="checkbox"] {
    display: none;
}
section#works label input[type="radio"] + span,
section#works label input[type="checkbox"] + span {
    padding-left: 1.5em;
    display: block;
    position: relative;
    cursor: pointer;
    font-feature-settings: "palt";
}
section#works label input[type="radio"]:checked + span,
section#works label input[type="checkbox"]:checked + span {
    color: var(--color-key1);
}
section#works label input[type="radio"] + span:before,
section#works label input[type="checkbox"] + span:before {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    content: "\e835";
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
    color: var(--color-gray1);
    position: absolute;
    left: 0;
    top: -0.1em;
    font-size: 1.2em;
}
section#works label input[type="radio"]:checked + span:before,
section#works label input[type="checkbox"]:checked + span:before {
    content: "\e834";
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
    color: var(--color-key1);
}
sub,
sub {
    font-size: 0.76em;
    line-height: 1;
    vertical-align: baseline;
}
section#works nav#sidenavi div#filter nav ul {
    display: flex;
    gap: 10px;
}
section#works nav#sidenavi div#filter nav ul li {
    width: 100%;
}
section#works nav#sidenavi div#filter nav ul li button {
    width: 100%;
}
div#title .btn,
section#works .btn {
    border: 2px solid var(--color-key1);
    color: var(--color-white);
    background-color: var(--color-key1);
    padding: 0.6em;
    border-radius: 0.4em;
    font-size: 1em;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: .5s;
    text-decoration: none;
}
div#title .btn {
	padding: 0.4em 0.6em;
}
div#title .btn:hover,
section#works .btn:hover {
    filter: brightness(1.2);
}
div#title .btn.mute,
section#works .btn.mute {
    border-color: var(--color-mute);
    background-color: var(--color-mute);
}
div#title .btn.white,
section#works .btn.white {
    color: var(--color-key1);
    background-color: var(--color-white);
}
div#title .btn.white.mute,
section#works .btn.white.mute {
    color: var(--color-mute);
    border-color: var(--color-mute);
}

section#works article#works {
    height: 100%;
    position: relative;
    width: calc(100% - 340px);
    display: flex;
    padding: 15px;
    gap: 30px;
    /*box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1) inset;*/
    border: 2px solid var(--color-beige1);
    border-radius: 0.3em;
}
section#works article#works div#resultmap {
    height: 100%;
    width: calc(100% - 340px);
    overflow: hidden;
    display: flex;
    gap: 5px;
    flex-direction: column;
}
section#works article#works div#resultmap div.resultinfo {
    /*border: 1px solid var(--color-beige1);*/
    border-radius: 0.4em;
    display: flex;
    gap: 1em;
    align-items: center;
}
div.resultinfo strong {
    font-weight: 600;
    font-size: 1.2em;
}
div.resultinfo sub {
    margin-left: 0.2em;
}
div.resultinfo p.areasearch {
    margin-left: auto;
}
div.resultinfo p.areasearch button {
    padding: 0.5em 1em;
}
/*ul.filterCriteria {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    position: relative;
}
div#resultlist ul.filterCriteria:not(.blank):after,
div#resultmap ul.filterCriteria:not(.blank):after {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    color: var(--color-key1);
    content: "\e147";
}
div#resultlist ul.filterCriteria.blank,
div#resultmap ul.filterCriteria.blank {
    display: none;
}
div.resultinfo ul.filterCriteria {
    flex-direction: row;
    margin-left: auto;
    align-items: center;
    gap: 1em;
    width: calc(100% - 12em);
    overflow: hidden;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-end;
    font-size: 0.86em;
    cursor: pointer;
}
ul.filterCriteria > li {
    padding-left: 1.5em;
    position: relative;
}
div.resultinfo ul.filterCriteria > li {
    line-height: 1;
    white-space: nowrap;
    max-width: 30%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0;
    position: relative;
}
ul.filterCriteria > li:empty {
    display: none;
}
ul.filterCriteria > li:before {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    color: var(--color-mute);
    line-height: 1;
    margin-right: 0.2em;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: 0.3em;
}
div.resultinfo ul.filterCriteria > li:before {
    position: inherit;
    left: auto;
    top: auto;
}
ul.filterCriteria > li.prefecture:before {
    content: "\e0c8";
}
ul.filterCriteria > li.product:before {
    content: "\f569";
}
ul.filterCriteria > li.facility:before {
    content: "\ea09";
}*/

section#works article#works div#resultmap div#gmap {
    height: 100%;
    border-radius: 0.4em;
    overflow: hidden;
    position: relative;
}
section#works article#works div#resultmap div#gmap iframe {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}
section#works article#works div#resultmap div#gmap p.areasearch {
    position: absolute;
    right: 5px;
    top: 5px;
}
section#works article#works div#resultlist {
    height: 100%;
    width: 330px;
    background-color: var(--color-white);
    padding: 0;
    border-radius: 0.4em;
    display: flex;
    flex-direction: column;
}
div#resultlist div.resultinfo {
    border-bottom: 1px solid var(--color-lgray1);
    padding: 10px 15px;
}
section#works article#works div#resultlist div.sc {
    overflow: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    height: 100%;
}
section#works article#works div#resultlist div.sc > ul {
    display: flex;
    flex-direction: column;
}
section#works article#works div#resultlist div.sc > ul > li + li {
    border-top: 1px dotted var(--color-beige1);
}
section#works article#works div#resultlist div.sc > ul > li {
    border: none;
    padding: 15px;
    text-align: left;
    display: flex;
    border-radius: 0;
    background-color: transparent;
    gap: 0 10px;
    cursor: pointer;
    position: relative;
    transition: .5s;
    text-decoration: none;
    color: var(--color-def);
    line-height: 1.2;
    align-items: flex-start;
}
section#works article#works div#resultlist div.sc > ul > li:hover {
    background-color: var(--color-lbeige1);
    background-color: var(--color-gray2);
}
section#works article#works div#resultlist div.sc > ul > li:hover {
    color: var(--color-white);
}
section#works article#works div#resultlist div.sc > ul > li p.thumb {
    width: 30%;
    position: relative;
    border: 1px solid var(--color-white);
}
/*section#works article#works div#resultlist > ul > li a[target="_blank"] p.thumb:after {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    content: "\e65b";
    position: absolute;
    right: 3px;
    top: 3px;
    font-size: 0.66em;
    line-height: 1;
    color: var(--color-white);
}*/
section#works article#works div#resultlist div.sc > ul > li:hover p.thumb:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc(20px / 2) 10px calc(20px / 2) 0;
    border-color: transparent var(--color-white) transparent transparent;
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    margin: auto;
}
section#works article#works div#resultlist div.sc > ul > li p.thumb img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}
section#works article#works div#resultlist div.sc > ul > li div {
    width: 70%;
}
section#works article#works div#resultlist div.sc > ul > li div h5 {
    font-size: 1em;
    letter-spacing: 0.1em;
    margin-bottom: 0.5em;
    font-weight: 600;
}
section#works article#works div#resultlist div.sc > ul > li:not(:hover) div h5 a {
    color: var(--color-key1);
    text-decoration: none;
}
section#works article#works div#resultlist div.sc > ul > li:hover div h5 a:not(:hover) {
    color: var(--color-white);
    text-decoration: none;
}
section#works article#works div#resultlist div.sc > ul > li:hover div h5 a:hover {
    color: var(--color-lkey1);
    text-underline-offset: 0.3em;
}
section#works article#works div#resultlist div.sc > ul > li div h5 a:after {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    content: "\e65b";
    font-size: 0.66em;
    line-height: 1;
    vertical-align: super;
}
section#works article#works div#resultlist div.sc > ul > li div p {
    font-size: 0.76em;
    margin-bottom: 0.2em;
    color: var(--color-mute);
    line-height: 1.5;
}
section#works article#works div#resultlist div.sc > ul > li div p i {
    margin-right: 0.2em;
}
section#works article#works div#resultlist div.sc > ul > li div > ul {
    color: var(--color-mute);
    font-size: 0.76em;
    margin-top: 0.5em;
}
section#works article#works div#resultlist div.sc > ul + p#backtolist {
    display: none;
    padding: 10px;
}
section#works article#works div#resultlist.closeup div.sc > ul + p#backtolist {
    display: block;
}
section#works article#works div#resultlist.closeup div.sc > ul + p#backtolist button {
    width: 100%;
}
section#works article#works div#resultlist.closeup div.sc > ul > li {
    display: none;
}
section#works article#works div#resultlist.closeup div.sc > ul > li.current {
    display: flex;
}
section#works ul.disc {
    margin-left: 1em;
}
section#works ul.disc > li {
    position: relative;
}
section#works ul.disc > li + li {
    margin-top: 0.3em;
}
section#works ul.disc > li:before {
    position: relative;
    content: "●";
    position: absolute;
    left: -1.4em;
    top: 0.5em;
    font-size: 0.6em;
    color: var(--color-mute);
}

section#disclaimer  {
	margin-top: 1vw;
}
section#disclaimer p {
	text-align: right;
	font-size: 0.86em;
}



/*--------------------------------------------
■［detail］
--------------------------------------------*/

header {
    transform: translateY(0);    
    transition: .5s;
}
header.schide {
    transform: translateY(-100%);    
}
section#works.detail {
    height: auto;
    overflow: inherit;
    display: block;
}
article#detail {
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
article#detail h1 {
    font-size: 1.6em;
    letter-spacing: 0.1em;
    line-height: 1;
    padding-bottom: 1rem;
    display: flex;
    margin-top: 0.5em;
    width: 100%;
}
article#detail h1 a {
    margin-left: auto;
    font-size: 0.76rem !important;
    text-decoration: none;
    letter-spacing: 0;
}
article#detail h2 {
    font-size: 1.3em;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin: 0;
    width: 70%;
}
article#detail ul.caseinfo {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: 30%;
}
article#detail div#photos {
    padding: 10px;
    width: 70%;
    margin: 0;
    border: 1px solid var(--color-beige1);
    margin-bottom: 2em;
}
article#detail div#photos button.slick-arrow {
    width: 36px;
    height: 0;
    padding: 0;
    padding-top: 34px;
    overflow: hidden;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 1px solid var(--color-key1);
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 40;
    cursor: pointer;
    font-size: 20px;
}
article#detail div#photos button.slick-arrow.slick-prev {
    left: -20px;
}
article#detail div#photos button.slick-arrow.slick-next {
    right: -20px;
}
article#detail div#photos button.slick-arrow:before {
    content: "\e314";
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    position: absolute;
    width: 1em;
    height: 1em;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    color: var(--color-key1);
    line-height: 1;
}
article#detail div#photos button.slick-arrow.slick-next:before {
    content: "\e5cc";
}
article#detail div#photos .slick-slide img {
    width: 100%;
}
article#detail div#photos ul#slider-nav {
    background-color: var(--color-beige1);
    padding: 5px;
}
article#detail div#photos ul#slider-nav .slick-slide {
    padding-left: 1px;
    padding-right: 1px;
}
article#detail div#photos ul#slider-nav .slick-current {
    background-color: var(--color-gray1);
}
article#detail div#photos ul#slider-nav .slick-current img {
    opacity: 0.4;
}
article#detail div#info {
    width: calc(30% - 2em);
    margin-left: auto;
    margin-bottom: 2em;
}
article#detail h3 {
    font-size: 1.26em;
    letter-spacing: 0.1em;
    margin-bottom: 0.75em;
}
article#detail a {
    color: var(--color-def);
}
article#detail ul.disc {
    margin-bottom: 2em;
}
article#detail ul.disc > li + li {
    margin-top: 0.5em;
}
article#detail p.comment {
    margin-bottom: 2em;
    line-height: 1.6;
}
article#detail p.awards {
    margin-bottom: 2em;
    color: var(--color-key1);
}
article#detail ul.category {
    border: 1px solid var(--color-beige1);
    margin-bottom: 2em;
}
article#detail ul.category > li + li {
    border-top: 1px solid var(--color-beige1);
}
article#detail ul.category > li a {
    display: block;
    padding: 0.75em;
    padding-right: 1em;
    position: relative;
    text-decoration: none;
}
article#detail ul.category > li a:after {
    content: "\e5cc";
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    position: absolute;
    width: 1em;
    height: 1em;
    right: 0.3em;
    top: 0;
    bottom: 0;
    margin: auto;
    color: var(--color-key1);
    line-height: 1;
}




/*--------------------------------------------
■［モーダル］
--------------------------------------------*/

div.modal {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
    background-color: rgba(0, 0, 0, 0.6);
}

div.modal-container {
    max-width: calc(100vw - 6vw);
    max-height: 90dvh;
    width: calc(100vw - 6vw);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    z-index: 1200;
    cursor: default;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
    width: 980px;
}
div.modal.dialog div.modal-container {
    width: 640px;
}
div.modal.half div.modal-container {
    width: 50vw;
}
div.modal-container p.close {
    position: absolute;
    right: 10px;
    top: 10px;
    line-height: 1;
    z-index: 10;
}
div.modal-container p.close button {
    padding: 0;
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    color: var(--color-key1);
    background-color: var(--color-white);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}
div.modal-container p.close button i {
    margin: 0 !important;
}
div.modal-container div.modal-content {
    background-color: var(--color-white);
    padding-bottom: 0;
    position: relative;
    border-radius: 0.6rem;
    overflow: hidden;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}
div.modal-container div.modal-content > div.modal-sc {
    overflow-y: auto;
    max-height: calc(90vh - (55px + 60px));
    padding: 20px;
    padding-bottom: calc(60px + 20px);
}
div.modal-container div.modal-content iframe {
    width: 100%;
    height: 700px;
    max-height: 90dvh;
}
div.modal-container div.modal-content > div.modal-sc:last-child {
    padding-bottom: 20px;
}
div.modal-container div.modal-content > nav.btnarea {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-white);
    margin: 0;
    padding: 10px;
    gap: 0 10px;
    border-top: 1px solid var(--color-lgray1);
    height: 60px;
    z-index: 1;
}
div.modal-container div.modal-content > nav.btnarea ul {
    display: flex;
    gap: 0 10px;
    justify-content: center;
}
div.modal-container div.modal-content > nav.btnarea ul .btn {
    padding: 0.6em;
    min-width: 8em;
}
div.modal-container div.modal-content div#mwheader {
    margin: 0;
    position: relative;
    color: var(--color-dkey1);
    line-height: 1.3;
    text-align: left;
    padding: 1rem;
    background-color: var(--color-key1);
    height: 55px;
    display: flex;
    align-items: center;
    gap: 10px;
}
div.modal-container div.modal-content div#mwheader ul {
    display: flex;
    gap: 5px;
    align-items: center;
}
div.modal-container div.modal-content div#mwheader h3 {
    font-size: 1.2em;
    margin: 0;
    width: 100%;
    color: var(--color-white);
}


@media screen and (max-width: 768px) and (orientation: portrait), 
    screen and (max-width: 979px) and (orientation: landscape) {

    /*--------------------------------------------
    ■［表示／非表示］
    --------------------------------------------*/

    .pc-view {
        display: none !important;
    }
    .sp-view {
        display: inherit !important;
    }


    /*--------------------------------------------
    ■［main］
    --------------------------------------------*/

    main {
        padding: calc(80px + 3vw) 0 3vw 0;
    }
	main div#title {
		gap: 3vw;
		padding: 0 2vw 3vw 2vw;
	}
	main div#title h1 {
		font-size: 5vw;
		letter-spacing: 0.1em;
		gap: 2vw;
		white-space: nowrap;
		width: auto;
	}
	main div#title h1 img.icon {
		height: 30px;
		width: 40px;
	}
	main div#title h1 img.title-img {
		height: 30px;
	}
	main div#title h1 + p {
		font-size: clamp(2vw, 0.76em, 12px);
		margin-left: auto;
		letter-spacing: 0;
	}
    
    section#works {
        flex-direction: column;
        height: auto;
        gap: 10px;
        overflow: visible;
        /*border-bottom: 1px solid var(--color-lgray1);*/
    }
    section#works nav#sidenavi {
        height: auto;
        width: auto;
        padding: 0 2vw;
    }
    section#works nav#sidenavi h1 {
        font-size: 1.6em;
        letter-spacing: 0.1em;
        line-height: 1;
        padding-bottom: 15px;
        display: flex;
        align-items: center;
    }
    section#works nav#sidenavi div#keywordSearch {
        display: flex;
        gap: 10px;
        padding-bottom: 5px;
    }
    section#works nav#sidenavi div#keywordSearch form {
        width: calc(100% - (10px + 10em));
    }
    section#works nav#sidenavi div#keywordSearch > p {
        width: 10em;
    }
    section#works nav#sidenavi div#keywordSearch > p button {
        position: relative;
        width: 100%;
    }
    section#works nav#sidenavi div#keywordSearch > p button.white:after {
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 calc(20px / 2) 14px calc(20px / 2);
        border-color: transparent transparent var(--color-beige1) transparent;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -17px;
        margin: auto;
    }
    section#works nav#sidenavi div#filter {
        display: none;
        margin-top: 10px;
    }
    section#works nav#sidenavi div#filter h3 {
    }
    section#works nav#sidenavi div#filter h3 button {
        font-size: 0.86rem;
    }
    section#works nav#sidenavi div#filter p.resultinfo {
        padding: 0.75em;
        border-top: 1px solid var(--color-beige1);
    }
    section#works nav#sidenavi div#filter div#filterConditions {
        position: relative;
        /*max-height: 70dvh;*/
        overflow: visible;
    }
    section#works nav#sidenavi div#filter div#filterConditions h4 {
        padding: 0.75em;
        padding-right: 2em;
    }
    section#works nav#sidenavi div#filter div#filterConditions h4::after {
        font-size: 1.2em;
    }
    section#works nav#sidenavi div#filter div#filterConditions ul {
        gap: 10px;
        font-size: 1.1em;
    }
    section#works nav#sidenavi div#filter div#filterConditions ul.sp-c2 > li {
        width: calc(100% / 2 - ((10px * 1) / 2));
    }
    section#works nav#sidenavi div#filter div#filterConditions ul.sp-c3 > li {
        width: calc(100% / 3 - ((10px * 2) / 3));
    }
    /*section#works nav#sidenavi div#filter nav {
        position: absolute;
        left: 2vw;
        right: 2vw;
        bottom: 0;
        padding: 10px;
        background-color: var(--color-white);
        border: 1px solid var(--color-key1);
        border-top: none;
        border-radius: 0 0 0.3em 0.3em;
    }*/
    section#works article#works {
        height: calc(100dvh - 25px);
        width: auto;
        flex-direction: column;
        gap: 0;
        padding: 10px;
        margin: 0 10px;
        box-sizing: border-box;
        overflow: hidden;
    }
    section#works article#works:after {
        border: 2px solid var(--color-beige1);
        border-radius: 0.3em;
        content: "";
        position: absolute;
        left: -2px;
        right: -2px;
        bottom: -2px;
        top: -2px;
        pointer-events: none;
    }
    section#works article#works div#resultmap {
        width: 100%;
        gap: 0;
        height: 100%;
    }
    section#works article#works div#resultlist {
        height: auto;
        height: 60dvh;
        width: auto;
        overflow: visible;
        background-color: var(--color-white);
        border-radius: 0.4em 0.4em 0 0;
        position: absolute;
        left: 4vw;
        right: 4vw;
        bottom: 0;
        transition: .5s;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        padding-bottom: 0;
    }
    section#works article#works div#resultlist.closeup {
        height: 18em;
    }
    section#works article#works div#resultlist.close {
        bottom: calc(-60dvh + 45px);
    }
    section#works article#works div#resultlist.closeup.close {
        bottom: calc(-18em + 45px);
    }
    section#works article#works div#resultlist > ul > li:hover p.thumb:after {
        border-width: 0 calc(20px / 2) 10px calc(20px / 2);
        border-color: transparent transparent var(--color-white) transparent;
        left: 0;
        right: 0;
        top: -10px;
        bottom: auto;
    }
    div#resultlist div.resultinfo {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.5em;
    }
    div#resultlist div.resultinfo p + p {
        margin-left: auto;
    }
    div#resultlist div.resultinfo p button {
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background-color: transparent;
        color: var(--color-key1);
        cursor: pointer;
        width: 4em;
        text-align: right;
    }
    div#resultlist.close div.resultinfo p button i,
    div#resultlist div.resultinfo p button i + i {
        display: none;
    }
    div#resultlist.close div.resultinfo p button i + i {
        display: inherit;
    }
    div#resultlist div.resultinfo ul.filterCriteria {
        width: 100%;
        justify-content: flex-start;
    }
    div.resultinfo ul.filterCriteria > li {
        max-width: 31%;
    }
    section#works article#works div#resultlist > ul {
        overflow-y: auto;
        height: 100%;
        scrollbar-width: thin;
    }
	section#disclaimer {
		padding: 2vw;
	}
	section#disclaimer p {
		text-align: left;
	}

    /*--------------------------------------------
    ■［detail］
    --------------------------------------------*/
	article#detail {
		padding: 0 2vw;
	}
    article#detail {
        display: block;
    }
    article#detail h2 {
        width: 100%;
        margin-bottom: 0.5em;
    }
    article#detail ul.caseinfo {
        width: 100%;
    }
    article#detail div#photos {
        width: 100%;
        margin-bottom: 2em;
    }
    article#detail div#info {
        width: 100%;
    }
}