/*
Theme Name: Opinion Child
Template: opinion_tcd018
Version: 1.0
*/

/* TOPページ編集コンテンツ */
.top-page-custom-content {
    margin-bottom: 30px;
    padding: 20px;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.top-page-custom-content img {
    max-width: 100%;
    height: auto;
}

.top-page-custom-content iframe {
    max-width: 100%;
}

.top-page-custom-content h1.headline1 {
    margin: 0 0 15px;
    font-size: 18px;
    height: auto;
    line-height: 1.6;
    padding: 8px 15px;
}

.top-page-custom-content table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* 選択済みコラム投稿 - PC */
#index_column_post { margin:0 0 20px 0; overflow:hidden; }
#index_column_post ul { border-left:1px solid #ccc; border-right:1px solid #ccc; margin:0; padding:0; background:#f9f9f9; }
#index_column_post li { width:314px; height:95px; float:left; border-bottom:1px solid #ccc; box-sizing:border-box; }
#index_column_post li.odd { border-right:1px solid #ccc; width:313px; }
#index_column_post .image { float:left; margin:10px 10px 0 10px; display:block; background:#000; width:100px; height:75px; }
#index_column_post .image img { width:100px; height:75px; display:block; opacity:1; transition: opacity .4s ease-in-out; }
#index_column_post .image:hover img { opacity:0.5; }
#index_column_post .info { float:left; width:180px; margin:10px 0 0 0; }
#index_column_post .date { margin:0 0 5px 0; padding:0; line-height:100%; font-size:12px; }
#index_column_post h2.title { margin:0; padding:0; font-size:13px; font-weight:bold; line-height:160%; height:60px; overflow:hidden; }
#index_column_post h2.title a { text-decoration:none; display:block; }
#index_column_post h2.title a:hover { text-decoration:underline; }

@media screen and (max-width: 750px) {
    .top-page-custom-content {
        padding: 15px 10px;
        margin-bottom: 20px;
    }

    /* 記事下コラムリンク - SP */
    #single_column_links { margin:20px 0; }
    #single_column_links ul { flex-direction:column; border:none; margin:0; padding:0; background:#f9f9f9; }
    #single_column_links li { flex:0 0 100%; width:100%; height:auto; border:1px solid #ccc; border-top:none; padding:15px; box-sizing:border-box; }
    #single_column_links li:first-child { border-top:1px solid #ccc; }
    #single_column_links li.odd { border-right:1px solid #ccc; }
    #single_column_links .image { float:left; width:30%; height:auto; margin:0 5% 0 0; }
    #single_column_links .image img { width:100%; height:auto; display:block; }
    #single_column_links .info { float:left; width:65%; margin:0; }
    #single_column_links h4.title { height:auto; }

    /* 選択済みコラム投稿 - SP */
    #index_column_post { margin:0 0 15px 0; }
    #index_column_post ul { margin:0; padding:0; background:#f9f9f9; }
    #index_column_post li { width:auto; height:auto; float:none; border:1px solid #ccc; border-top:none; padding:15px; }
    #index_column_post li.odd { border-right:1px solid #ccc; width:auto; }
    #index_column_post .image { float:left; width:30%; height:auto; margin:0 5% 0 0; }
    #index_column_post .image img { width:100%; height:auto; display:block; }
    #index_column_post .info { float:left; width:65%; margin:0; }
    #index_column_post h2.title { height:auto; }
}

/* 商品リンクセクション - PC */
#single_product_links { margin:30px 0; overflow:hidden; }
.product_links_heading {
    display:flex; align-items:center; justify-content:center; gap:15px;
    margin-bottom:18px; padding:14px 20px;
    background:transparent; border:2px solid #673ab7;
    border-radius:6px; color:#333;
}
.product_links_heading { position:relative; margin-bottom:30px; }
.product_links_heading::before {
    content:""; position:absolute; bottom:-16px; left:50%;
    transform:translateX(-50%);
    border-left:42px solid transparent; border-right:42px solid transparent;
    border-top:16px solid #673ab7;
}
.product_links_heading::after {
    content:""; position:absolute; bottom:-13px; left:50%;
    transform:translateX(-50%);
    border-left:38px solid transparent; border-right:38px solid transparent;
    border-top:13px solid #fff;
}
.product_links_icon { width:70px; height:70px; object-fit:contain; flex-shrink:0; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.product_links_heading_text { display:flex; flex-direction:column; gap:2px; position:relative; }
.product_links_sub { font-size:13px; opacity:0.9; letter-spacing:0.5px; }
.product_links_marker { background:linear-gradient(transparent 60%, #fff59d 60%); }
.product_links_main { font-size:22px; font-weight:bold; letter-spacing:1px; }
.product_links_main::after {
    content:"!"; display:inline-block;
    transform:rotate(12deg); margin-left:2px;
    font-size:20px; font-weight:900; color:#673ab7;
}
.product_item_list { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 15px; padding:0; list-style:none; }
.product_item { box-sizing:border-box; }
.product_item a { display:grid; grid-template-columns:80px 1fr; align-items:center; text-decoration:none; color:#333; border:1px solid #ddd; border-radius:4px; overflow:hidden; transition:box-shadow .3s; }
.product_item a:hover { box-shadow:0 2px 8px rgba(0,0,0,0.15); color:#333; }
.product_item_image { width:80px; height:80px; overflow:hidden; background:#f5f5f5; }
.product_item_image img { width:100%; height:100%; object-fit:cover; display:block; }
.product_item_title { margin:0; padding:8px 12px; font-size:13px; font-weight:bold; line-height:1.5; }
.product_link_buttons { display:flex; gap:15px; }
.product_link_btn {
    display:flex; flex:1; align-items:center; justify-content:center;
    padding:18px 20px; position:relative;
    text-align:center; font-size:15px; font-weight:bold;
    color:#fff; background:#6b3fa0; text-decoration:none;
    border-radius:4px; transition:background .3s;
}
.product_link_btn::after {
    content:"▶"; position:absolute; right:15px;
    font-size:12px; opacity:0.7; transition:right .3s, opacity .3s;
}
.product_link_btn:hover { background:#7d4fbf; color:#fff; text-decoration:none; }
.product_link_btn:hover::after { right:10px; opacity:1; }
.product_link_btn:visited, .product_link_btn:active { color:#fff; }

@media screen and (max-width: 750px) {
    #single_product_links { margin:20px 0; }
    .product_links_heading { padding:10px 15px; gap:10px; }
    .product_links_icon { width:44px; height:44px; }
    .product_links_sub { font-size:10px; }
    .product_links_main { font-size:15px; }
    .product_item_list { grid-template-columns:1fr; gap:8px; margin-bottom:10px; }
    .product_item a { grid-template-columns:60px 1fr; }
    .product_item_image { width:60px; height:60px; }
    .product_item_title { padding:6px 10px; font-size:12px; }
    .product_link_buttons { gap:10px; }
    .product_link_btn { padding:14px 15px; font-size:14px; }
}

/* 記事下コラムリンク - PC */
#single_column_links { margin:30px 0; overflow:hidden; }
#single_column_links h3.headline2 { margin-bottom:15px; }
#single_column_links ul { display:flex; flex-wrap:wrap; border:1px solid #ccc; margin:0; padding:0; background:#f9f9f9; list-style:none; }
#single_column_links li { flex:0 0 50%; height:auto; min-height:95px; border-bottom:1px solid #ccc; box-sizing:border-box; display:flex; align-items:stretch; }
#single_column_links li.odd { border-right:1px solid #ccc; }
#single_column_links .image { flex:0 0 100px; margin:10px 10px 0 10px; display:block; background:#000; height:75px; }
#single_column_links .image img { width:100px; height:75px; display:block; opacity:1; transition: opacity .4s ease-in-out; }
#single_column_links .image:hover img { opacity:0.5; }
#single_column_links .info { flex:1; min-width:0; margin:10px 10px 0 0; }
#single_column_links h4.title { margin:0; padding:0; font-size:13px; font-weight:bold; line-height:160%; height:60px; overflow:hidden; }
#single_column_links h4.title a { text-decoration:none; display:block; }
#single_column_links h4.title a:hover { text-decoration:underline; }

/* カテゴリーカスタムフィールド */
.category-custom-content {
    margin: 0 0 25px;
    padding: 20px;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.category-custom-image {
    margin-bottom: 15px;
}

.category-custom-image img {
    max-width: 100%;
    height: auto;
}

.category-custom-text p {
    margin-bottom: 1em;
    line-height: 1.8;
}

@media screen and (max-width: 750px) {
    .category-custom-content {
        padding: 15px 10px;
        margin-bottom: 15px;
    }
}

/* ヘッダー - Flex レイアウト */
#header_wrap {
    min-width: 0 !important;
    border-top: 5px solid #222;
}

#header {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 950px;
    margin: 0 auto;
    padding: clamp(8px, 1.5vw, 15px) clamp(10px, 2vw, 20px);
    height: auto !important;
    position: static !important;
}

#logo_text,
#logo_image {
    position: static !important;
    flex: 0 1 auto;
    max-width: 600px;
    min-width: 0;
}

#logo {
    position: static !important;
    margin: 0 !important;
    font-size: 18px;
    line-height: 1.3;
}

#logo_text #description {
    font-size: 11px;
    margin: 4px 0 0;
    color: #666;
    line-height: 1.6;
}

#header_link {
    position: static !important;
    float: none !important;
    flex: 0 0 auto;
    margin-left: auto !important;
    margin-right: 0 !important;
    font-size: 8.5pt;
}

#header_link div {
    width: auto !important;
    padding: 10px 30px;
}

#header_link div span {
    font-size: 11pt;
}

#contents,
#global_menu,
#footer_widget,
#footer {
    max-width: 950px !important;
    width: 100% !important;
    margin: 0 auto;
    box-sizing: border-box;
}

#header_wrap,
#footer_widget_wrap,
#footer_wrap,
#copyright {
    min-width: 0 !important;
    width: 100%;
}

#copyright {
    height: auto !important;
    line-height: 1.6;
    padding: 10px 15px;
}

/* フッター - Flex レイアウト */
#footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto !important;
    position: static !important;
    padding: 30px 20px;
    text-align: center;
}

#footer_logo_text_area {
    position: static !important;
    margin-bottom: 15px;
}

#footer_logo_text {
    font-size: 20px;
    margin: 0 0 5px;
}

#footer_logo_text a {
    text-decoration: none;
    color: #333;
}

#footer_description {
    position: static !important;
    display: block !important;
    font-size: 11px;
    color: #aaa;
    margin: 0;
}

#footer_menu_area {
    position: static !important;
}

#footer_menu {
    float: none !important;
    margin: 0;
}

#footer_menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#footer_menu li {
    float: none !important;
    margin: 0 !important;
}

#footer_social_link {
    display: none !important;
}

@media screen and (max-width: 640px) {
    #footer {
        padding: 20px 0;
        align-items: stretch;
        text-align: left;
    }

    #footer_logo_text_area {
        padding: 0 15px;
    }

    #footer_logo_text {
        display: block !important;
        font-size: 16px;
    }

    #footer_description {
        display: block !important;
    }

    #footer_menu {
        width: 100%;
    }

    #footer_menu ul {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    #footer_menu li {
        border-bottom: 1px solid #ddd;
    }

    #footer_menu li:first-child {
        border-top: 1px solid #ddd;
    }

    #footer_menu li a {
        display: block;
        padding: 12px 15px;
        text-decoration: none;
        color: #333;
        font-size: 13px;
        text-align: left;
    }
}

#header_menu_area {
    position: static !important;
    display: none;
}

.search_area {
    display: none !important;
}

#header_banner {
    position: static !important;
    display: none;
}

/* SP ヘッダー調整 */
@media screen and (max-width: 640px) {
    #header_wrap {
        border-top: 4px solid #222;
    }

    #header {
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 5px 8px;
        padding: 8px 10px;
        min-height: 0;
        max-width: 100% !important;
        width: fit-content !important;
        box-sizing: border-box;
        box-shadow: 0 0 5px rgba(0,0,0,0.5);
    }

    #logo_text,
    #logo_image {
        grid-column: 1;
        grid-row: 1 / 3;
        overflow: hidden;
    }

    #header a.menu_button {
        grid-column: 2;
        grid-row: 1;
        position: static !important;
        display: block;
        padding: 6px 10px;
        font-size: 11px;
        line-height: 1;
        border: 1px solid #999;
        color: #333;
        text-decoration: none;
        z-index: 10;
        justify-self: end;
    }

    #logo {
        float: none !important;
        width: auto !important;
        font-size: 12px !important;
        line-height: 1.4;
        white-space: normal;
        overflow: visible;
    }

    #logo img { display: none; }
    #logo a:before { content: attr(data-label); }

    #logo_text #description {
        display: none;
    }

    #header_link {
        grid-column: 2;
        grid-row: 2;
        font-size: 8pt;
        margin: 0 !important;
        justify-self: end;
    }

    #header_link div {
        padding: 6px 12px !important;
        display: inline-block;
    }

    #copyright {
        width: fit-content !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}