<section class="s-8">
<header class="header8">
<div class="header-bar">
<div class="header-bar-inner">
<h1 class="header-logo8">
<a href="#">
<img src="#"
alt="ロゴ画像"></a>
</h1>
<nav class="global-nav-container">
<ul class="p-global-nav">
<li class="menu-item8">
<a href="#" aria-current="page" class="link">
HOME
</a>
</li>
<li class="menu-item8 sub-link8">
<a href="#">
商品
</a>
<ul class="sub-menu8">
<li>
<a href="#" class="link">会場設営用品【屋内】
</a>
</li>
<li>
<a href="#" class="link">会場設営用品【屋外】
</a>
</li>
<li>
<a href="#" class="link">式典・セレモニー
</a>
</li>
<li>
<a href="#" class="link">家電・家具・布団
</a>
</li>
<li>
<a href="#" class="link">
映像
</a>
</li>
<li>
<a href="#" class="link">
音響・通信カラオケ
</a>
</li>
<li>
<a href="#" class="link">
アミューズメント
</a>
</li>
<li>
<a href="#" class="link">
スポーツ・レジャー・介護用品
</a>
</li>
<li>
<a href="#" class="link">
ベビー用品
</a>
</li>
<li>
<a href="#" class="link">
調理器具
</a>
</li>
<li>
<a href="#" class="link">
季節用品
</a>
</li>
<li>
<a href="#" class="link">
照明
</a>
</li>
<li>
<a href="#" class="link">
仮設トイレ・手洗器
</a>
</li>
<li>
<a href="#" class="link">
バルーン
</a>
</li>
<li>
<a href="#" class="link">
トラベル用品
</a>
</li>
<li>
<a href="#" class="link">
事務用品・選挙用品
</a>
</li>
<li>
<a href="#" class="link">
その他
</a>
</li>
</ul>
</li>
<li class="menu-item8">
<a href="#" class="link">
設営事例
</a>
</li>
<li class="menu-item8 sub-link8">
<a href="#" class="link">
契約について
</a>
<ul class="sub-menu8 sub-block">
<li>
<a href="#" class="link">
キャンセルについて
</a>
</li>
<li>
<a href="#" class="link">
契約条項
</a>
</li>
</ul>
</li>
<li class="menu-item8">
<a href="#" class="link">
会社概要
</a>
</li>
<li class="menu-item8 sub-link8">
<a href="#" class="link">
お問い合せ
</a>
<ul class="sub-menu8 sub-block">
<li>
<a href="#" class="link">
商品について
</a>
</li>
<li>
<a href="#" class="link">
企画について
</a>
</li>
</ul>
</li>
<li class="menu-item8 sub-link8 search-ic">
<a href="#">
<img src="./images/serach.png" alt="検索ボタン">
</a>
<div class="sub-menu8 p-header-search">
<form action="" method="get">
<input type="text" name="s" value="" class="p-header-search__input" placeholder="SEARCH">
</form>
<a href="#" class="p-search-button c-search-button"></a>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>
</section>*{
box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,p{
margin: 0;
padding: 0;
font-size: 100%;
font-weight: 400;
}
li {
list-style: none;
}
ul,ol{
margin: 0;
padding: 0;
list-style-type: none;
}
a {
text-decoration: none;
color: rgb(0, 0, 0);
transition: 0.6s;
transition: 0.6s;
transition: 0.6s;
transition: 0.6s;
transition: 0.6s;
}
html,body{
width: 100%;
margin: 0 auto;
padding: 0;
text-align: center;
/* font-size: 16px; */
/* フォントサイズ1440幅24px320pxで16px基本で変化 */
/* font-size: calc((100vw - 320px) / 140 + 16px); */
/* フォントサイズ1500幅16px320pxで14px基本で変化 */
/* font-size: calc((100vw - 320px) / 590 + 14px); */
/* フォントサイズ1500幅16px基本770pxで14pxで変化 */
font-size: calc((100vw - 770px) / 325 + 14px);
font-family: 'Noto Sans JP', sans-serif;
}
@media screen and (min-width:768px) {
.sp{
display: none;
}
}
@media screen and (max-width:767px) {
.pc{
display: none;
}
/*
html,body{
font-size: 14px;
} */
}
/* ＊＊＊＊＊
共通部分
*/
section:not(.s-1){
width: 100%;
padding: 50px 0 0 0;
}
.container{
max-width: 1500px;
margin: 0 auto;
}
@media screen and (max-width:767px) {
section{
padding: 20px 0 0 0;
}
}
.header-wrap {
width: 100%;
}
.header-bar{
width: 100%;
background: url(https://inopro.jpn.org/wp-content/uploads/2023/08/header-bar-bg.jpg) repeat-x right bottom;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.header-bar-inner{
width: 100%;
height: 100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.header-logo8 img{
width: 300px;
margin-right: 20px;
}
.p-header-search{
width: 100px;
}
.global-nav-container ul.p-global-nav{
width: 100%;
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
}
.menu-item8{
border-left: 1px solid #000;
}
.menu-item8 a {
display: inline-block;
padding: 40px 15px;
color: black;
text-align: center;
text-decoration: none;
text-indent: 2px;
letter-spacing: 2px;
line-height: 1;
transition: 0.4s;
}
.search-ic a {
position: relative;
border-right: none;
}
.sub-menu8 {
position: absolute;
opacity: 0;
visibility: hidden;
background-color: #050089;
display: flex;
flex-wrap: wrap;
max-width: 750px;
transition: 0.4s;
}
.sub-menu8.p-header-search {
background-color: transparent;
}
.p-header-search__input {
height: 50px;
width: 280px;
position: absolute;
top: 5px;
left: -50%;
}
.sub-menu8.sub-block{
display: block;
max-width: 250px;
}
.sub-link8:hover .sub-menu8 {
opacity: 1;
visibility: visible;
}
.menu-item8 ul li a {
display: block;
width: 250px;
padding: 15px;
color: #fff;
text-align: left;
font-size: 1rem;
}
.menu-item8 ul li a:hover {
background-color: #87cefa;
color: #19288c;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.