@charset "utf-8";

.search-form {
    --border1-color:#d6d6d6;
    font-size: 15px;
    height: 100%;
    display: grid; grid-template-rows: auto 1fr;
}
@media (max-width:1200px) {
    .search-form { font-size: 13px; }
}

/* head-search */
@media all {
    .search-form .head-search {
        display: grid; grid-template-columns: 1fr 1fr 2fr;
    }
    .search-form .head-search > :is(.area-head,.theme-head) {
        display: flex; align-items: center; justify-content: space-between;
        padding:1.1333em 1.3333em; background: #ebebeb; cursor: pointer;
    }
    .search-form .head-search > :is(.area-head,.theme-head) > .icon { 
        display: inline-block; width: 1em;
    }
    .search-form .head-search > :is(.area-head,.theme-head) > .icon > span {
        display: block;  
        background: url(./img/arrow_up.png) no-repeat center / 100%; 
        padding-bottom: 100%;
    }
    /* on */
    .search-form .head-search > :is(.area-head.on,.theme-head.on) {
        background: #fff; border: 1px solid var(--border1-color); 
        border-bottom:none;
    }
    .search-form .head-search > :is(.area-head.on,.theme-head.on) > .icon > span {
        background: url(./img/arrow_down.png) no-repeat center / 100%; 
    }
    .search-form .head-search .search-head {
        background: #c90000;
    }
    .search-form .head-search .search-head form {
        display: grid; grid-template-columns: 1fr auto;
        padding:1.1333em 1.3333em; gap:15px; color: #fff;
    }
    .search-form .head-search .search-head form input::placeholder {
        color: inherit;
    }    
}
@media (max-width:991px) {
    .search-form .head-search { grid-template-columns: repeat(2,1fr); }
    .search-form .head-search .search-head { display: none; }
}

/* content-search */
@media all {
    .search-form .content-search {  
        border: 1px solid var(--border1-color); border-top: none;
        display: grid; align-content: center; padding: 0 0.5em;
    }
    .search-form .content-search .mob { display: none; }
    /* area */
    .search-form .content-search .area-content > ul {
        display: grid; grid-template-columns: repeat(11,1fr);
    }
    .search-form .content-search .area-content > ul > li.border {
        border-bottom: 1px solid var(--main-color);
    }
    .search-form .content-search .area-content > ul > li {
        flex:1; text-align: center;
    }
    .search-form .content-search .area-content > ul > li > a {
        display: block; padding: 2em 0; transition: 0.4s;
    }
    /* theme */
    .search-form .content-search .theme-content > ul.pc {
        display: flex;
    }
    .search-form .content-search .theme-content > ul.pc > li {
        flex:1; text-align: center;
    }
    .search-form .content-search .theme-content > ul.pc > li:not(:last-child) {
        border-right: 1px solid var(--border1-color);
    }
    .search-form .content-search .theme-content > ul.pc > li > a {
        display: grid; justify-items: center; padding: 1em 0;
    }
    .search-form .content-search .theme-content > ul.pc > li > a:hover {
        opacity: 0.8;
    }
    .search-form .content-search .theme-content > ul.pc > li > a svg {
        display: block; margin: 0 auto; width: calc(45 / 101 * 100%); height: auto;
    }
    .search-form .content-search .theme-content > ul.pc > li > a .text {  
        color: #000; margin-top: 1em;
    }
}
@media (max-width:991px) {
    .search-form .content-search { 
        padding: 0; border-bottom: none; border-top: 1px solid var(--border1-color);
        border-right: none;
    }
    .search-form .content-search .pc { display: none !important; }
    .search-form .content-search .mob { display: block; }

    /* area */
    .search-form .content-search .area-content > ul {
        grid-template-columns: repeat(4,1fr);
    }
    .search-form .content-search .area-content > ul > li.border {  
        border-bottom: 1px solid var(--border1-color);
    }
    .search-form .content-search .area-content > ul > li { 
        border-right: 1px solid var(--border1-color); border-bottom: 1px solid var(--border1-color);
    }
    .search-form .content-search .area-content > ul > li > a { padding: 1em 0; }

    /* theme */
    .search-form .content-search .theme-content > ul.mob {
        display: grid; grid-template-columns: repeat(4,1fr);
    }
    .search-form .content-search .theme-content > ul.mob > li { 
        border-right: 1px solid var(--border1-color); border-bottom: 1px solid var(--border1-color);
    }
    .search-form .content-search .theme-content > ul.mob > li > a { 
        display: block; text-align: center; padding: 1em 0; 
    }
}
@media (max-width:480px) {
    /* area */
    .search-form .content-search .area-content > ul {
        grid-template-columns: repeat(3,1fr);
    }
    /* theme */
    .search-form .content-search .theme-content > ul.mob {
        grid-template-columns: repeat(3,1fr);
    }
}


/* theme-list */
@media (max-width:991px) {
    .theme-list {
        --border1-color:#d6d6d6;
        display: grid !important; grid-template-columns: repeat(4,1fr);
        font-size: 15px; margin-top: 2em;
        border-top: 1px solid var(--border1-color);
        border-left: 1px solid var(--border1-color);
    }
    .theme-list > li {
        text-align: center; padding-bottom: 100%; position: relative;
        border-bottom: 1px solid var(--border1-color); 
        border-right: 1px solid var(--border1-color);
    }
    .theme-list > li > a {
        position: absolute; left: 0; top: 0;
        width: 100%; height: 100%;
        display: grid; justify-items: center; align-content: center; padding:0;
    }
    .theme-list > li > a:hover {
        opacity: 0.8;
    }
    .theme-list > li > a svg {
        display: block; margin: 0 auto; width: calc(90 / 234 * 100%); height: auto;
    }
    .theme-list > li > a * { stroke:var(--main-color); }
    .theme-list > li.icon2 > a * { fill:var(--main-color); stroke: none; }
    .theme-list > li.icon5 > a * { fill:var(--main-color); stroke: none; }
    .theme-list > li > a .text {  
        color: #000; margin-top: 1em;
    }
}
@media (max-width:480px) {
    .theme-list { font-size: 11px; }
}