*,*::before,*::after {box-sizing: border-box;}
html {-webkit-text-size-adjust: 100%;text-size-adjust: 100%;scroll-behavior: smooth;}body,h1, h2, h3, h4, h5, h6,p,ul, ol,dl, dd,figure,blockquote {margin: 0;}
ul,ol {padding: 0;list-style: none;}img {max-width: 100%;height: auto;vertical-align: bottom;}table {border-collapse: collapse;border-spacing: 0;}button,input,select,textarea {font: inherit;}a {color: inherit;text-decoration: none;}
body {background: var(--bg_color);color: #777;font-size: 16px;font-family: "ff-din-paneuropean", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;font-weight:100;min-width: 1200px;}


:root{
--news_height:70px;
--story_gap:6rem;
--story_padding:2rem;
--brand_gap:1rem;
--max-width:1400px;
--hover_color:#629dc9;
}

.wrap_fv{height:100vh;position: relative;}
.wrap_mov{height: calc(100vh - var(--news_height));}
.wrap_logo{position: absolute;top: calc(50% - (var(--news_height) / 2));left: 0;transform: translate(5rem, -50%);}
.h1_logo{}
.h1_logo_img{max-height: 106px;width: auto;}
.h1_logo_txt{font-weight: lighter;font-size: 1.1rem;text-indent: 8px;color: #222;}
.bg_video{width: 100%; height: 100%;object-fit: cover;}
.wrap_news{height:var(--news_height);border-bottom: 1px #ddd solid;}
.news_block{height: 100%;}
.news_block > a {display: flex;height: 100%;align-items: center;padding: 0 1.5rem;}
.news_icon{border: 1px #aaa solid;font-size: .7em;padding: .2em .6em;margin-right: 1rem;color: #888;}
.news_date{font-size: .9em;margin-right: 1rem;color: #888;}
.news_txt{font-size: .9em;color: #888;}
.news_block a:hover {transform: translateX(10px);}
.news_block a {transition: .5s;}
.news_block a:hover *{color:var(--hover_color);border-color:var(--hover_color);}


.wrap_story{padding: 8rem var(--story_padding) 10rem;max-width: calc(var(--max-width) + (var(--story_padding) * 2));margin:0 auto;}
.wrap_ttltxt{max-width: var(--max-width);margin:0 auto;}
.h2_ttl{color: #222;font-size: 1.6em;font-weight: 500;display: block;line-height: 1em; margin-bottom: .5em;}
.h2_ttl::before {content: "\02500 \0A0 \0A0";}
.h2_subtxt{display: block;font-size: .95rem;font-weight: 100;color: #ccc;}
.story_area{display: flex;align-items: center;gap: var(--story_gap);position: relative; margin-top: 2.5rem;}
.story_block{width: calc((100% - (var(--story_gap) * 2)) / 3);}
.h3_ttl{font-size: 1.3em;font-weight: 100;margin: 5rem 0 2rem 0;}
.story_txt{font-size: .9em; /*font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;*/ font-weight: 500;}
.story_img {object-fit: cover;width: 100%;height: 100%;}
.story_img img{width:100%;height: 100%;}
.wrap_story .h3_ttl {margin-top: 0;}

.wrap_brand{}
.brand_area{background: url(http://wonderinc.jp/wp-content/uploads/2026/04/brand_bg.jpg) no-repeat;background-size: cover;background-position: center; margin: 2rem 0;padding: 12rem 0 9rem;}
.brand_inner{max-width: var(--max-width);margin: 0 auto;text-align: right;color: #222;padding: 0 var(--story_padding);}
.brand_list{list-style: none;display: flex;gap: var(--brand_gap);flex-wrap: wrap;}
.brand_block{width: calc((100% - (var(--brand_gap) * 5)) / 6);transition:.5s;background: #fff;}
.brand_block:hover {transform: translatey(-8%);}
.brand_box{display: block;padding: 1.4rem 2.5rem;transition:.5s;background: #fff;}
.brand_box:hover{opacity:.2;transform: translatey(-2%);}
.brand_img{}
.wrap_brand .wrap_ttltxt {padding: 0 2rem;}

.line_button{letter-spacing: 1px;transition:.5s;display: inline-block;position: relative;padding: 5px 60px 5px 5px;margin-top: 1rem;}
.line_button::after{content: "";display: block;width: 40px;height: 6px;border-bottom: 1px #222 solid;position: absolute;right: 0;top: 50%;opacity: 1;transform: translateY(-50%) scaleX(1);}
.line_button::before {content: "";display: block;width: 8px;border-bottom: 1px #222 solid;transform: rotate(45deg);right: 0;position: absolute;bottom: 50%;}
.line_button:hover{transform: translateX(-20%) scaleX(1);color:var(--hover_color);}


.wrap_oem{overflow: hidden;margin-top: 1rem;}
.oem_inner{max-width: calc(var(--max-width) + (var(--story_padding) * 2));margin: 0 auto;padding: 8rem var(--story_padding) 0;display: grid;grid-template-columns:minmax(320px, 420px) 1fr;gap: var(--story_gap);align-items: end;}
.oem_copy{min-width: 300px;}
.oem_visual{min-width: 0;margin-right: calc(50% - 50vw);height: 100%;}
.oem_list{display: grid;grid-template-columns: repeat(3, 1fr);gap: 1.5rem;list-style: none;width: 1300px;}
.oem_block{aspect-ratio: 3 / 5;background: #ddd;}
.oem_block img {width: 100%;height: 100%;object-fit: cover;display: block;}
.wrap_oem.is-reverse .oem_inner{grid-template-columns:1fr minmax(320px, 420px);}
.wrap_oem.is-reverse .oem_visual{margin-right: 0;margin-left: calc(50% - 50vw);position: relative;height:695px;}
.wrap_oem.is-reverse .oem_list {position: absolute;right: 0;}
.oem_btn {text-align: right;margin: 3rem 0 0 0;}

.wrap_footer {border-top: 1px #eee solid;padding: 3rem 2rem 1rem;text-align: center;margin-top: 9rem;}
.footer_menu {display: flex;justify-content: center; gap: 2rem;font-size: .9em;margin-bottom: 3rem;}
.footer_menu li{margin:0;}
.footer_logo{text-align:center;}
.footer_logo img {width: 140px;}
.footer_copy{font-size: .8em;margin: 1rem 1rem 0rem;}
.footer_link{transition:.5s;padding: .3rem 1rem;display: block;}
.footer_link:hover{color:var(--hover_color);transform:translateY(-10px)}



@media screen and (max-width: 768px){
:root{
--news_height:100px;
--story_gap: 2rem;
--story_padding: 1.5rem;
--brand_gap: .7rem;
--copy_width:calc((100vw / 7) * 4);
}

body {min-width: inherit;}
.wrap_logo{transform: translate(2rem, -50%);}
.h1_logo_img{max-height: 60px;}
.h1_logo_txt{font-size: .8rem;}
.hidden{display:none;}

.news_block > a{flex-wrap: wrap;gap: .2rem 0;align-content: center;padding: 0 1rem;}
.news_txt{line-height:1.4em;font-size: .85em;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden;}
.news_icon{padding: .05em .5em;margin-right: .6rem;font-size: .65em;}

.wrap_story{padding: 6rem var(--story_padding);}
.story_area{flex-wrap: wrap;}
.story_block{width:100%;}
.story_img img{height: 220px;object-fit: cover;}

.h2_ttl{font-size: 1.3em;}
.h2_subtxt{font-size: .93rem;}
.h3_ttl{margin: 2.5rem 0 1rem 0;font-size: 1.1em;}
.story_txt {font-size: .8em;}

.wrap_brand .wrap_ttltxt{padding: 0 var(--story_padding);}
.brand_area{padding: 5rem 0;}
.brand_list{justify-content: center;}
.brand_block{width: calc((100% - var(--brand_gap)) / 2);max-width: 210px;}
.brand_box{padding: 1.3rem 1.2rem;}
.brand_block:hover {transform: translatey(0);}
.brand_box:hover{opacity:1;transform: translatey(0);}

.oem_inner {padding: 5rem 0 0 var(--story_padding);align-items: stretch;grid-template-columns: var(--copy_width) 1fr;gap: 0;}
.oem_visual {margin-right: 0;}
.oem_list {width: 100%;display: flex;flex-wrap: wrap;height: 100%;}
.oem_block{aspect-ratio:inherit;}
.oem_copy{min-width: var(--copy_width);width: 100%;padding-right: var(--story_padding);}
.oem_block img{object-position: left center;}
.wrap_oem.is-reverse .oem_inner{padding:5rem var(--story_padding) 0 0;}
.wrap_oem.is-reverse .oem_copy{padding: 0 0 0 var(--story_padding);}
.wrap_oem.is-reverse .oem_inner {grid-template-columns: 1fr var(--copy_width);}
.wrap_oem.is-reverse .oem_block img{object-position: right center;height: 124px;}
.wrap_oem.is-reverse .oem_list{justify-content: flex-end;}
.wrap_oem.is-reverse .oem_visual{height:inherit;max-height: 350px;}
}
@media screen and (max-width: 500px){
.oem_inner {display: block;}
.oem_block{width: 100%;}
.oem_list{padding-right:var(--story_padding);margin-top: 3rem;}
.oem_btn{margin: 1rem 0 0 0;}
.oem_block img{height: 124px;}

.wrap_oem.is-reverse .oem_inner{display: flex;flex-wrap: wrap;flex-direction: column-reverse;}
.wrap_oem.is-reverse .oem_visual{margin: 0;position: inherit;max-height: inherit;}
.wrap_oem.is-reverse .oem_list{padding-left: var(--story_padding);position: inherit;padding-right: 0;}
.wrap_oem.is-reverse .oem_block img{object-position:center;}

.wrap_footer{padding: 2rem .5rem 1rem;}
.footer_menu{gap: .5rem;}
}