@charset "UTF-8";
/*
Theme Name: Now And Then
Theme URI: https://lookat.co.jp
Author: Look At Inc.
Author URI: https://lookat.co.jp
Description: There will be an answer, let it be.
Version: 1.0.0
License: GNU General Public License v2 or later
*/

@import url("style-root.css");
@import url("style-nwmaster.css"); 



/* 東京港湾事務所 */
/* 横スクロール回避 */
body { overflow-x: clip;}

header {padding:1rem 0 0;position: fixed;z-index: 2;background: #fff;}
header::after {
	content:"　";
	display: block;
	width:100vw;
	height: .5rem;
	margin-top:1rem;
background: #5433FF;
background: linear-gradient(to right,#5B86E5,#20BDFF,#36D1DC,#5B86E5);
}
.header-logo {width:360px;max-width:20vw;}
@media (max-width: 640px) {.header-logo {max-width:60vw}}
h1 {max-width:100%}

#right-menu {display: flex;flex-direction: column;align-items: flex-end;gap:.5rem;}
#right-menu .font-size-change {display: flex;gap:.25rem;font-size:.75rem;align-items: flex-end;}
#right-menu .font-size-change ul {display: flex;gap:.25rem;align-items: flex-end;margin:0;}
#right-menu .font-size-change ul .size-btn {padding-left:0;text-indent: 0;list-style-type: none;}
#right-menu .font-size-change ul .size-btn button {background: #eee;border-radius:4px;padding:.125rem .5rem;cursor: pointer;}
#right-menu .font-size-change ul .size-btn.medium button {font-size:.85rem;}
#right-menu .font-size-change ul .size-btn.large button {font-size:1rem;}


#main-menu {background:  linear-gradient(to right,#5B86E5,#20BDFF,#36D1DC,#5B86E5);padding-bottom:.5rem;padding-top:102px;}
#main-menu .cell a {background: #fff;display: flex;flex-direction: column;gap:.5rem;align-items: center;justify-content: center;padding:.25rem;border: 1px solid #5B86E5;font-size: .8125rem;width: 100%;aspect-ratio: 1/1;text-align:center;}
@media (min-width: 641px) {#main-menu .cell a {justify-content: center;}}

#sidebar #main-menu {background: var(--sub-color-dark);padding:2rem 1rem;display: flex;flex-direction:column;gap:1rem;}
#sidebar #main-menu .cell a {background: #fff;display: flex;align-items: center;padding:1rem;border-radius:.25rem;}
#main-menu .cell i {background: var(--sub-color);width:2rem;height:2rem;aspect-ratio: 1/1;display: grid;place-items: center;color:#fff;border-radius:50%;margin:0;}

#sub-area {background: var(--sub-color-light);padding:2rem 1.5rem 1rem;margin-bottom: 3rem;border-radius:5px;}
#sub-area li i {color: #00838F;}


#tokyoport-hero {padding:0;margin-bottom: 0}
#tokyoport-hero .grid-container {padding:0;}
@media (min-width: 641px) {#tokyoport-hero .orbit {margin-top:102px;}}
#tokyoport-hero .orbit img {width:100%;aspect-ratio: 3/2;object-fit: cover;max-height:1080px;}
#tokyoport-hero .orbit-container li {padding:0;text-indent: 0;}
#tokyoport-hero .orbit-bullets {margin:0;background: transparent;}
#tokyoport-hero .orbit-caption {padding:.5rem;font-size:.8125rem;}

#tokyoport-news h3,
#out-link h3 {margin-bottom: 1rem;color:#1565C0;}
#tokyoport-news h3 i,
#out-link h3 i {color:#FFCA28;}

#tokyoport-news ul {background: var(--gray-color-light);padding:1rem;height:24rem;overflow-y: scroll;}
#tokyoport-news li {border-bottom: 1px dotted #1976D2;padding:.5rem .25rem .125rem;display: flex;gap:0 .5rem;text-indent:0;}
#tokyoport-news li a {font-weight:bold;}
#tokyoport-news li:first-child {padding-top:0}
#tokyoport-news .date {font-size: .8125rem;}
@media (min-width: 1025px) {#tokyoport-news .date {display: inline-block;flex: 0 0 13rem;}}
#tokyoport-news .date:after {content: "トピックス";color:#fff;font-size:.75rem;padding:.125rem .25rem;background:#03A9F4;border-radius:4px;width:5rem;line-height:1;text-align:center;display:inline-block;margin-left:.25rem;margin-right:.25rem;}
#tokyoport-news .report .date:after {content: "レポート";color:#fff;background:#D32F2F;}
@media (max-width: 1024px) {#tokyoport-news li {display: flex;flex-direction:column;}}

#in-link {background: transparent;}
#in-link .cell {text-align: center;font-weight: bold;font-size: .875rem;aspect-ratio: 2/1;box-shadow: 0 2.5rem 2rem -2rem hsl(200 50% 20% / 40%);}
#in-link .cell a {display: block;width:100%;height:100%;display: grid;place-items: center;color:#fff;text-shadow: 0 2px 5px rgba(0, 0, 0, .5);padding:1rem;}
#in-link .cell a:hover {color:#03A9F4;}
#in-link .banner-harborroad {background: #500}
#in-link .banner-harborroad {background: url(https://lookat8.xsrv.jp/hidekky/wp-content/uploads/2025/03/bg-harborroad.jpg);background-size: cover;background-position: center bottom;}
#in-link .banner-disaster {background: #500}
#in-link .banner-disaster {background: url(https://lookat8.xsrv.jp/hidekky/wp-content/uploads/2025/03/bg-disaster.jpg);background-size: cover;}
#in-link .banner-x {background: #000;font-size: 2rem;}


#out-link {background: linear-gradient(var(--gray-color-light), rgba(255,255,255,1));padding-bottom:0;}
#out-link .cell {text-align: center;font-weight: bold;font-size: .875rem;}
@media (min-width: 641px) {#out-link .cell {aspect-ratio: 3/1;}}
#out-link .cell a {display: block;width:100%;height:100%;display: grid;place-items: center;border:4px solid #1E88E5;background: #fff;color:#01579B;box-shadow :0px 1px 6px 2px rgba(0, 0, 0, 0.2);border-radius:.25rem;line-height:1.3;padding:0 .25rem;min-height:4rem;}
#out-link .cell a:hover {background:#E3F2FD}
#out-link .grid-margin-x[class*="small-up-"] > .cell {margin-bottom: 1rem;}

.chinmai-area {text-align:right;}
.chinmai-area img {width:250px;}

footer {background: linear-gradient(to right,#5B86E5,#20BDFF,#36D1DC,#5B86E5);}
.footer-link {justify-content: flex-end;}
.footer-link a {color:#fff;font-weight:bold;font-size:.875rem;}
@media (max-width: 640px) {.footer-link {flex-direction: column;}}

#right-menu {display: flex;justify-content: flex-end;align-items: flex-end;}
#right-menu nav {display: flex;gap:1rem;}
#right-menu nav i {background: var(--sub-color);width:2rem;height:2rem;aspect-ratio:1/1;display: grid;place-items: center;color:#fff;border-radius:50%;}
#right-menu .cell-inline a {display: flex;align-items: center;}






/*
 * Typography Scale CSS
 * Generated with Type Scale Generator
 */

/* Fluid Typography Settings
 * Min Viewport: 320px
 * Max Viewport: 1200px
 * Note: Only applies to text larger than 1rem
 */

:root {
  --base-size: 16px;
  --scale-ratio: 1.125;
  --body-font: "Inter";
  --body-weight: 500;
  --body-line-height: 1.5;
  --body-letter-spacing: normal;
  --body-color: #222222;
  --body-background: #FFFFFF;
  
  --heading-font: var(--body-font);
  --heading-weight: 700;
  --heading-line-height: 1.25;
  --heading-letter-spacing: normal;
  --heading-color: var(--body-color);
}


/* Type scale 
.smallest { font-size: 0.79rem; }
.caption { font-size: 0.889rem; }
.body { font-size: 1rem; }
h6 { font-size: clamp(0.844rem, 0.741rem + 0.511vw, 1.125rem); }
h5 { font-size: clamp(0.95rem, 0.834rem + 0.575vw, 1.266rem); }
h4 { font-size: clamp(1.068rem, 0.939rem + 0.647vw, 1.424rem); }
h3 { font-size: clamp(1.202rem, 1.056rem + 0.728vw, 1.602rem); }
h2 { font-size: clamp(1.352rem, 1.188rem + 0.819vw, 1.802rem); }
h1 { font-size: clamp(1.52rem, 1.336rem + 0.921vw, 2.027rem); }

*/