@charset "UTF-8";
/* Basic CSS created by Kaneyoshi-y(X.com user name @kaneyoshi_y21) */
/* https://kaneyoshi-y.net */
/* Richard Clark氏(Twitter: @rich_clark)のreset系CSSと併用して利用する基本的なサイトで共通したCSS内容をまとめている */
/* フォントや余白の指定などはサイトごとに設定を変えることを前提としている */
body {
font-family:
"ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro",
"ヒラギノ角ゴ Pro W3", "Meiryo", "メイリオ", "sans-serif";
background: #fff;
color: #000080;
}
article,
aside,
main,
section {
outline: 0;
vertical-align: baseline;
background: transparent;
}
/* マージン中央寄せ ma0atはクラス追加指定用(例:class="sebase ma0at")*/
header,
main,
nav,
footer,
section,
#wrapper,
.ma0at {
margin: 0 auto;
}
/* ulのbox-sizingは個別指定0427 */
/*sticky効果をつけるならsticky効果指定要素以下の要素へのborder-box指定は推奨 */
header *
{
box-sizing: border-box;
}
ul {
list-style-type: none;
}
header,
main {
width: 100%;
}
/* heibht:auto;なしへ0427 */
img {
width: 100%;
max-width: 100%;
}
/* iframe */
iframe {
width: 100%;
max-width: 100%;
/*height:auto;*/
}
a {
text-decoration: none;
}
button {
background-color: transparent;
margin: 0;
border: 0;
outline: 0;
}
section p {
width: 100%;
/* padding: 0.1rem; */
/* resetにてpタグには余白0となるように設定されている */
/* もしpタグ要素内の左右に余白設定するならborder-box指定要 */
line-height: 1.6;
}
/*ナビ*/
/* #nav はこのID名でJQueryを実装することがあるためこのID名を使用している */
nav, #nav {
/*width: clamp(900px, 78%, 1000px);*/
/* max-width: 1024px; 128x8 */
width: 100%;
}
/* nav ul#nav */
nav ul#nav {
display: flex;
justify-content: space-around;
/* padding: 0 1px 0 1px; */
list-style: none;
}
/* nav ul li paddingは子要素のaタグで */
nav ul li {
display: block;
width: 25%;
background-color: #6484b4;
text-align: center;
cursor: pointer;
transition: all 0.4s; /*変化速度*/
}
/*nav ul li aリンクボタン flexヴァージョンは削除0427 */
/*フォントサイズ指定参照:font-size: min(1rem, 18px);*/
/* nav ul li aタグblock 文字色親要素継承バージョン↓ */
nav ul li a {
display: block;
width: 100%;
padding: 0.8rem 1rem;
color: inherit;
font-weight: 700;
}
/* nav ul li aタグinline-block 文字色指定バージョン↓ */
/* nav ul li a {
display: inline-block;
width: 100%;
height: 100%;
padding: 5px 1rem;
color: #0033cc;
font-weight: 700;
} */
nav ul li:hover {
background: white;
/* border-radius:0.8rem; */
}
/* ナビここまで */
/* baseここまで------------------------------------------ */
/* サイト全体設定base2------------------------------------------ */
/* 見出しタグ関連--- */
h1 {
font-size: 2rem;
}
h2{
padding:0.2rem;
}
/* h2, h3, h4 {
text-align: center;
} */
/* 見出しタグ関連ここまで--- */
/* base2ここまで------------------------------------------ */
/* wrapper--body直下の外枠--- */
#wrapper {
width: 100%;
max-width: 1280px;
min-width: 500px;
position: relative;
background-color: aliceblue;
}
/* wrapperここまで--- */
/* header */
.header_logo {
width: min(30vw, 300px);
/* margin-left: 2%; */
}
header div.header_logo h1 {
width: 100%;
margin: 0;
padding: 0;
}
/* article直下のbox */
article div {
/* 枠幅など確認用の枠線指定↓ */
border: 1px solid rgba(128, 0, 128, 0.4);
}
aside div {
width: min(20vw, 200px);
/* max-width: 200px; */
padding: 1rem;
border: 1px solid #6484b4;
}
footer div {
background-color: #6484b4;
padding: 0.5rem 0;
text-align: center;
color: #000080;
}
/* ly_inner:main直下のbox。flex設定以外にもサイト構成によってはCSS記述を設定する可能性があるためly_flexとは分けて記述している */
.ly_inner {
display: flex;
}
/*section子要素用*/
.sebase {
/* position: relative; */
/* background-color: #fff; */
/* border-radius: 1em; */
border: 1px solid #6484b4;
width: min(80%, 1024px);
padding: 1.5rem;
margin-bottom: 2.5rem;
}
.txindent p {
text-indent: 1em;
padding-top: 0.5em;
}
/* ma0at同様、クラス追加指定で利用可のクラス */
/* .ly_flex {
display: flex;
} */
/* 装飾 */
/* .decoration::after {
position: absolute;
bottom: -2rem;
right: -2rem;
display: block;
border-radius: 18px;
content: "";
width: 6rem;
height: 6rem;
} */
/* --- */
/* JQuery関連 CSSアニメーションなど */
/* sticky記述文はbase.cssからは削除------------*/
/* slider */
#slide {
width: 80%;
max-width: 896px;
}
#slide ul {
display: block;
position: relative;
max-width: 100%;
}
#slide li {
/* position: absolute; */
max-width: 100%;
border-radius: 20px;
display: block;
}
#slide li img {
display: block;
height: auto;
border-radius: 20px;
}
/* end slider */