@charset "utf-8";

/*
==================================================
 Responsive overrides for legacy Kagaku Kogyo site
 Keep this file AFTER base.css and top.css
==================================================
*/


/* -------------------------------------------------
   GENERAL SAFETY
-------------------------------------------------- */
/* Prevent page-level horizontal overflow */
html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Make sizing predictable */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Never allow media to exceed its parent */
img,
video,
iframe,
object,
embed {
    max-width: 100%;
    height: auto;
}

/* Important for old layouts */
#container,
#header,
#leftcol,
#centercol,
#rightcol,
#contents_leftcol {
    max-width: 100%;
}

/* Prevent long text/URLs from forcing width */
p,
a,
li,
div {
    overflow-wrap: anywhere;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    min-width: 0;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

iframe,
object,
embed,
video {
    max-width: 100%;
}

table {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
    font: inherit;
}


/* -------------------------------------------------
   MAIN CONTAINER

   Original:
       width: 1200px;

   This preserves 1200px on large screens but allows
   the site to shrink on smaller screens.
-------------------------------------------------- */

#container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* -------------------------------------------------
   LARGE / MEDIUM SCREENS
   Anything smaller than original 1200px layout
-------------------------------------------------- */

@media screen and (max-width: 1199px) {

    /*
     * HEADER
     */

    #header {
        width: 100%;
    }

    #headimg01 {
        width: 100%;
        max-width: none;
        height: 30px;
        float: none;
        object-fit: cover;
    }

    #cdlogo {
        width: 31%;
        max-width: 352px;
        height: auto;

        margin: 10px 2%;
        float: left;
    }

    #search_box {
        width: 226px;
        max-width: 30%;

        margin: 25px 1% 0;
        float: right;
    }

    #sitemap {
        margin: 25px 2% 0 0;
        float: right;
    }


    /*
     * MAIN CONTENT
     *
     * Old layout:
     * leftcol = fixed 180px
     * centercol = fixed 570px
     * large fixed margins
     *
     * New layout:
     * approximately 24% / 74%
     */

    #leftcol {
        width: 24%;
        margin: 0 2% 20px 0;
        padding: 0;
        float: left;
    }

    #centercol {
        width: 74%;
        margin: 0;
        padding: 0;
        float: left;
    }

    #rightcol {
        width: 100%;
        margin: 20px 0;
        padding: 0;
        float: none;
        clear: both;
    }


    /*
     * OTHER FIXED-WIDTH CONTENT
     */

    #contents_leftcol,
    #text_box,
    #text_contents {
        width: auto;
        max-width: 100%;
    }

    #contents_leftcol {
        margin-left: 0;
    }

    #text_contents {
        margin-left: 15px;
        margin-right: 15px;
    }

    .contents_line {
        width: 100%;
    }

    .attention_box,
    .attention_box_s {
        width: 100%;
        max-width: 100%;
    }

    .centercol_left_image,
    .centercol_left_image2,
    .centercol_left_image3,
    .centercol_left_image4 {
        max-width: 35%;
        height: auto;
    }

    .centercol_right_text,
    .centercol_right_text2,
    .centercol_right_text3 {
        width: 63%;
        max-width: 63%;
    }


    /*
     * HOMEPAGE BOXES
     *
     * A lot of these probably receive hard-coded widths
     * from top.css.
     */

    #information_box,
    #information_contents,
    #leftbanner_box,

    #headline_box,
    #headline_contents,
    #headline_bottom,

    #unknown_box,
    #unknown_contents,
    #unknown_bottom,

    #news_box,
    #news_contents,
    #news_bottom,

    #rightbanner_box {
        max-width: 100%;
    }


    /*
     * BANNERS / TITLE IMAGES
     */

    #leftcol img,
    #centercol img,
    #rightcol img {
        max-width: 100%;
        height: auto;
    }

    .leftbanner,
    .rightbanner,
    .movbanner {
        max-width: 100%;
        height: auto;
    }


    /*
     * FOOTER
     */

    #footer01_box,
    #footer02_box {
        width: 100%;
    }

    #footer02_box {
        height: auto;
        min-height: 60px;
        overflow: hidden;
    }

    #footer02_r {
        margin-left: 2%;
    }

    #footer02_l {
        margin-right: 2%;
    }
}


/* -------------------------------------------------
   TABLET
-------------------------------------------------- */

@media screen and (max-width: 900px) {

    /*
     * HEADER
     */

    #cdlogo {
        width: 40%;
        margin: 12px 2%;
    }

    #search_box {
        max-width: none;
        margin-top: 20px;
        margin-right: 2%;
    }

    #sitemap {
        clear: right;
        margin-top: 5px;
        margin-right: 2%;
    }


    /*
     * NAVIGATION
     *
     * The old menu probably uses background images,
     * fixed widths and/or image sprites.
     */

    #menu_box {
        width: 100% !important;
        height: auto !important;
        clear: both;
    }

    #menu_box ul {
        width: 100% !important;
        height: auto !important;

        display: flex;
        flex-wrap: wrap;

        margin: 0;
        padding: 0;
    }

    #menu_box li {
        display: block;

        width: auto !important;
        height: auto !important;

        flex: 1 1 25%;

        margin: 0 !important;
        padding: 0 !important;

        background-image: none !important;
        text-indent: 0 !important;
    }

    #menu_box li a {
        display: block;

        width: 100% !important;
        height: auto !important;

        padding: 9px 6px;

        background-image: none !important;

        text-indent: 0 !important;
        text-align: center;
        line-height: 1.4;

        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

    /*
     * These appear to only be decorative menu ends.
     */

    #menu01,
    #menu11 {
        display: none !important;
    }


    /*
     * CONTENT
     */

    #leftcol {
        width: 28%;
        margin-right: 2%;
    }

    #centercol {
        width: 70%;
    }


    /*
     * Prevent long Japanese text/URLs from
     * creating horizontal scrolling.
     */

    #leftcol,
    #centercol,
    #rightcol,
    #headline_contents,
    #news_contents,
    #unknown_box {
        overflow-wrap: anywhere;
        word-break: normal;
    }


    /*
     * FOOTER
     */

    #footer01_box {
        height: auto;
        min-height: 45px;
    }

    #footer01 {
        padding: 12px 15px;
        line-height: 2;
    }

    #footer02_r,
    #footer02_l {
        float: none;

        width: 100%;

        margin: 0;
        padding: 10px 15px;

        text-align: center;
    }
}


/* -------------------------------------------------
   MOBILE
-------------------------------------------------- */

@media screen and (max-width: 650px) {

    body {
        font-size: 15px;
        line-height: 1.65;
    }

    /*
     * HEADER
     */

    #headimg01 {
        height: 20px;
    }

    #cdlogo {
        display: block;
        float: none;

        width: 80%;
        max-width: 352px;

        margin: 15px auto;
    }

    #search_box {
        float: none;

        width: 226px;
        max-width: calc(100% - 30px);

        margin: 10px auto;
    }

    #search_box form {
        width: 100%;
    }

    #search_box form p {
        width: 100%;
        margin: 5px 0 0;
        padding: 0 5px;
        white-space: nowrap;
    }

    #search_box input[name="q"] {
        width: calc(100% - 55px);
    }

    #sitemap {
        float: none;
        clear: both;

        margin: 8px auto 15px;
    }


    /*
     * FONT SIZE CONTROLS
     */

    #mojisize01 {
        display: none;
    }

    #mojisize02 {
        float: none !important;

        width: 100% !important;
        height: auto !important;

        margin: 5px 0 !important;

        text-align: center;
    }


    /*
     * NAVIGATION
     */

    #menu_box ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    #menu_box li {
        width: 100% !important;
    }

    #menu_box li a {
        min-height: 44px;
        padding: 11px 8px;

        font-size: 14px;
    }


    /*
     * MAIN PAGE
     *
     * Stack everything vertically.
     */

    #leftcol,
    #centercol,
    #rightcol,
    #contents_leftcol {
        float: none;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 20px !important;
        padding: 0 12px;
    }


    /*
     * HOME PAGE SECTIONS
     */

    #information_box,
    #information_contents,

    #headline_box,
    #headline_contents,

    #unknown_box,

    #news_box,
    #news_contents {
        width: 100% !important;
        max-width: 100% !important;
    }


    /*
     * LEFT SIDEBAR
     *
     * Turn old inline LI elements into normal blocks.
     */

    #information_contents li {
        display: block;
        width: 100%;

        margin-bottom: 12px;
    }

    #leftbanner_box {
        width: 100% !important;
        text-align: center;
    }

    #leftbanner_box a {
        display: inline-block;
        max-width: 100%;
    }

    .leftbanner {
        display: block;
        margin: 0 auto 10px;
    }


    /*
     * HEADLINES
     */

    #headline_contents p,
    #news_contents p {
        margin: 0;
        padding: 10px 4px;

        line-height: 1.6;
    }

    #headline_contents p img,
    #news_contents p img {
        max-width: 80px;
    }


    /*
     * TWO-COLUMN "UNKNOWN" AREA
     * becomes one column on mobile.
     */

    #unknown_contents_left,
    #unknown_contents_right {
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 10px !important;
    }


    /*
     * OLD CENTER-COLUMN IMAGE + TEXT COMBINATIONS
     */

    .centercol_left_image,
    .centercol_left_image2,
    .centercol_left_image3,
    .centercol_left_image4,
    .centercol_right_text,
    .centercol_right_text2,
    .centercol_right_text3 {
        float: none;

        width: 100%;
        max-width: 100%;

        margin: 0 0 12px;
    }

    .centercol_left_image,
    .centercol_left_image2,
    .centercol_left_image3,
    .centercol_left_image4 {
        text-align: center;
    }


    /*
     * GENERIC TEXT BOXES
     */

    #text_box {
        width: 100%;
        margin-bottom: 15px;
    }

    #text_contents {
        width: auto;
        margin: 0;
        padding: 10px 12px;
    }

    .attention_box,
    .attention_box_s {
        float: none;

        width: 100%;
        max-width: 100%;

        padding: 10px;
    }


    /*
     * Old marquee can easily overflow mobile screens.
     */

    marquee {
        display: block;
        width: 100%;
        max-width: 100%;
    }


    /*
     * FOOTER
     */

    #footer01_box,
    #footer02_box {
        width: 100%;
        height: auto;
    }

    #footer01 {
        padding: 15px 12px;
        font-size: 12px;
        line-height: 2;
    }

    #footer02_r,
    #footer02_l {
        float: none;

        width: 100%;

        margin: 0;
        padding: 10px 12px;

        text-align: center;
        font-size: 11px;
        line-height: 1.8;
    }
}


/* -------------------------------------------------
   VERY SMALL PHONES
-------------------------------------------------- */

@media screen and (max-width: 400px) {

    #menu_box ul {
        grid-template-columns: 1fr;
    }

    #cdlogo {
        width: 90%;
    }

    #leftcol,
    #centercol,
    #rightcol {
        padding-left: 8px;
        padding-right: 8px;
    }
}