@charset "UTF-8"; * { box-sizing: border-box; } html { font-size:15px; line-height:1.5em; } body { background-color:#cccccc; color: #000000; padding: 0; margin: 0; font-family: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif; } h1, h2, h3, h4 { line-height:1.5em; } header { width: 100%; padding: 0; margin: 0 0 10px 0; } h1 { text-align:center; margin: 0; padding: 0; } h1 img { max-width:720px; width:90%; height:auto; display:block; margin:0 auto; } header p { margin: 10px 10px; } .top { display:flex; flex-wrap: wrap; justify-content: space-between; margin: 0 10px; } .blog { width:670px; height:700px; margin: 0 auto; } .blog iframe { width: 100%; } .fb { width:300px; margin: 0 auto; } /*メニュー共通*/ nav ul { display: flex; list-style: none; padding: 0; margin: 0; } nav li { padding: 0; margin: 0; } nav a { display: block; line-height: 40px; height:40px; padding: 0 15px; margin: 0; color:#fff; font-weight:bold; text-decoration:none; vertical-align: middle; } nav a img { margin:7px 0; } nav a:hover { background-color:#900; } /*PCメニュー*/ .pc { height: 40px; margin:0 0 20px 0; padding:0 10px; background-color:#036; color:#fff; } .pc > ul > li { position:relative; } .pc ul > li > ul { display:none; } .pc li:hover > ul { display:block; position:absolute; width: max-content; z-index:10; top:40px; left:0; background-color: #036; } .pc li li a { border-top: solid 0.5px #fff; } .parrent:after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); } .sns, .sm { display: none; } /*スマホ*/ @media (max-width: 1000px) { .pc { display: none; } header { position:relative; } header p { margin: 10px 70px 10px 10px; padding:0; } h1 { margin:0 70px 0 0; padding:10px; min-height:60px; } h1 img { margin:0; } .sns { position:absolute; top:5px; right:5px; display:flex; flex-direction:column; list-style:none; margin:0; padding:0; } .sns li { width:60px; height:50px; margin:0; padding:0; } .sns a img { display:block; margin:10px; } #hamburger { display:flex; background-color: transparent; position: relative; cursor: pointer; margin: 0 0 0 auto; height: 60px; width: 60px; } .icon span { position: absolute; left: 15px; width: 30px; height: 4px; background-color: #000000; border-radius: 8px; transition: ease 0.75s; } .icon span:nth-of-type(1) { top: 16px; } .icon span:nth-of-type(2) { top: 28px; } .icon span:nth-of-type(3) { bottom: 16px; } .close span:nth-of-type(1) { transform: rotate(45deg); top: 28px; } .close span:nth-of-type(2) { opacity: 0; } .close span:nth-of-type(3) { transform: rotate(-45deg); top: 28px; } .sm { position: relative; top: 0; left: 0; z-index: 10; width: 100%; } .sm ul { background-color: #036; flex-flow: column; } .sm a { text-align:center; border-top: solid 0.5px #fff; } .blog { width: 100%; height:500px; margin: 0 auto; } .blog iframe { width: 100%; height: 100%; } .fb { width:100%; height:500px; margin: 0 auto; } .fb iframe { width: 100%; height: 100%; margin: 0 auto; } } /* ここまでスマホ*/ .container { max-width:1000px; min-width:300px; margin: 0 auto; background-color:#fff; } .childpage { background-color:#fff; margin: 0 10px; padding: 0; } .wrapper { display:flex; flex-wrap: wrap; width:100%; } .column2 { margin: 0 auto; } .blogbnr { text-align: center; } .copy { text-align:center; } h2, h3 { color:#fff; text-align:left; text-valign:middle; padding:0 10px; } h2 { background-color:#990000; margin: 10px 0; } h3 { font-size:1.4em; background-color:#666666; margin:20px 5px 5px 5px; } h4 { margin:20px 5px 5px 5px; padding:5px 10px; border-color: #666666; border-style: solid; border-width: 2px 2px 2px 20px; } h4.strong { margin:5px 0 0 0; font-size:1.3em; color:#cc0000; border-color: #cc0000; } .bold { font-weight: bold; } .article { display:flex; margin:10px 5px 10px 5px; } .photo { width:360px; margin:0px 10px; } .photo img { display:block; width:100%; margin:0; } ul.small { margin: 5px 5px 20px 5px; } ul.info { list-style-type: none; margin: 0; padding: 0; } ul.info li, p.info { margin: 5px 0px; padding: 0; font-weight:bold; text-align:center; color:#ffffff; background-color:#990000; } p.buttonparrent { margin: 10px 0px 10px; padding: 0; font-weight:bold; text-align:center; } a.button, a.buttonem, span.buttonsold { display:block; height:100%; width:100%; background-color: #003366; color: #ffffff; margin: 0; padding: 3px 5px; text-decoration:none; } a.buttonem { display:block; height:100%; width:100%; background-color: #FFEE00; color: #000000; border-radius: 10px; border-style: solid; border-width: 4px; border-color: #000000; text-decoration:none; } a.button:hover, a.buttonem:hover { color: #ffffff; background-color: #cc0000; } a.redbutton { display:block; height:100%; width:100%; background-color: #FF0000; color: #ffff00; border-radius: 10px; border-style: solid; border-width: 4px; border-color: #000000; text-decoration:none; } a.redbutton:hover { color: #ff0000; background-color: #ffff00; } span.buttonsold { background-color: #666666; color: #FFFFFF; } span.takakugo { font-family: "ta-kakugo-gf-01", sans-serif; font-weight: 400; font-style: normal; } .context p.kakomi { margin:0 0 10px 0; padding:5px; color:#cc0000; border-style: solid; border-width: 0 2px 2px 20px; border-color: #cc0000; } .context { flex: 1; margin:0px 0px 0px 20px; } .context h3 { margin:5px 0px 5px 0px; } .context p { margin:5px 0; } .floatleft { float:left; } ul.buttons { display:flex; list-style-type: none; margin: 0; padding: 0; } ul.buttons li { width:32%; margin: 10px auto; padding: 0; font-weight:bold; text-align:center; color:#ffffff; background-color:#990000; } ul.twobuttons { display:flex; list-style-type: none; margin: 0; padding: 0; } ul.twobuttons li { width: 49%; margin: 10px auto; padding: 0; font-weight:bold; text-align:center; color:#ffffff; background-color:#990000; } ul.contents { margin:0; padding:0 10px; } ul.contents li { list-style-type: none; margin:0; padding:0; } @media screen and (max-width: 700px) { .article { display: block; } .photo { max-width:400px; width: 100%; margin: 0; } .context { max-width: 100%; margin: 0 auto 0 auto; } ul.buttons { display:block; } ul.buttons li { width:100%; } .article p { margin:20px 0; } } /* FEATURES */ .features { width: 100%; display:flex; flex-wrap: wrap; } .feature { display:flex; flex-direction: column; width:480px; margin:5px; padding:0; } @media screen and (max-width: 1000px) { .feature { width:100%; } } .feature h3 { margin:3px; padding:3px; } .feature img { display:block; margin:3px; padding:0; } .feature p { margin:0 0 10px 0; padding:10px; font-size:14px; line-height:1.4em; } /* CALENDAR */ .calendar { width: 100%; display:flex; flex-wrap: wrap; justify-content: center; border-top:2px solid #999999; padding-top:10px; } .calendar::before { content:""; display: block; width:320px; order:1; } .calendar::after { content:""; display: block; width:320px; } .event { display:flex; flex-direction: column; width:310px; background-color:#fff; border-width:2px; border-style:solid; border-color:#999999; border-radius: 5px; margin:5px; padding:0; } .event h3 { background-color:#eeeeee; color:#000000; margin:0; padding:5px; font-size:20px; line-height:1.2em; } .event > h3 > span { font-size:16px; } .event p { margin:0; padding:10px; font-size:14px; line-height:1.4em; } .event p.inquiry { font-weight:bold; color:#990000; margin:auto 0 0 0; } /* バックナンバー */ .backissue { width: 100%; display:flex; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0; margin: 0; line-height:1.2em; text-align:center; font-weight:bold; } .backissue > li { display:flex; flex-direction: column; width:153px; margin:5px; padding:0; border-width:2px; border-style:solid; border-color:#ccc; background-color: #eee; border-radius: 5px; } .backissue div { position: relative; height:162px; width:153px; } .backissue .cover { display:block; position: absolute; bottom: 0; left:50%; transform: translateX(-50%); margin: 0 auto; border:1px solid #ccc; } .backissue .title { font-size:17px; margin: 8px 5px; padding: 0; } .backissue ul { list-style: none; font-size:13px; padding: 0; margin: auto 5px 0 5px; } .backissue .price { } .backissue ul li a { display:block; background-color: #036; border-radius: 8px; color: #fff; margin: 5px 0; padding: 3px 0; text-decoration:none; } .backissue ul li a:hover { background-color: #900; } .backissue .sold { display:block; background-color: #666; border-radius: 8px; color: #fff; margin: 5px 0; padding: 3px 0; } /* DEALER */ .dealer { width: 100%; display:flex; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0; margin: 0; } .dealer li { width:235px; margin:5px; padding:0; border-width:2px; border-style:solid; border-color:#666666; border-radius: 5px; } .dealer h4 { border-style:none; font-size:17px; font-weight:bold; background-color: #eee; margin:0; padding:5px; height:3.5em; } .dealer address { font-style:normal; margin:0; padding:5px; } /* LINK */ .links { width: 100%; display:flex; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0; margin: 0; } .links::before { content:""; display: block; width:245px; order:1; } .links::after{ content:""; display: block; width:245px; } .links li { width:235px; margin:5px; padding:0; display:flex; flex-direction: column; align-items:stretch; height:100%; text-decoration:none; color:#fff; border-width:2px; border-style:solid; border-color:#666666; background-color:#666666; border-radius: 5px; } .linkpref { display:block; text-align:center; } .linklogo { position:relative; display:block; height:110px; background-color:#fff; color:#000000; font-size:20px; text-align:center; } .linklogo img { display:block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin:auto; } .linkdisc { display:block; text-align:center; } .linksns { display:block; text-align:center; } a.linklogo:hover { border-color:#990000; background-color:#990000; } /* issue */ .issue { display:flex; } .issue .cover { width:340px; line-height:1.2em; text-align:center; font-weight:bold; } .issue .cover img { border:1px solid #ccc; } .issue .cover ul { list-style: none; font-size:13px; padding: 0; margin: auto 10px 0 10px; } .issue .cover ul li a { display:block; background-color: #036; border-radius: 8px; color: #fff; margin: 5px 0; padding: 3px 0; text-decoration:none; } .issue .cover ul li a:hover { background-color: #900; } .issue .cover .sold { display:block; background-color: #666; border-radius: 8px; color: #fff; margin: 5px 0; padding: 3px 0; } table { margin: 0; } table, th, td { border-collapse: collapse; border-style: solid; border-width: 2px; border-color: #000; } th, td { padding: 5px; } td a { display:block; width:100%; margin: 5px auto; padding: 0; font-weight:bold; text-align:center; text-decoration: none; color:#ffffff; background-color:#039; } td a:hover, td a:focus { color:#ffffff; background-color:#900; }