/*-------------------------- マッキートレ mackytr.com 2022-11-24 --------------------------*/ @charset "UTF-8"; /*------------------------ A Modern CSS Reset ------------------------*/ /* Box sizingの定義 */ *, *::before, *::after { box-sizing: border-box; } /* デフォルトのpaddingを削除 */ ul[class], ol[class] { padding: 0; } /* デフォルトのmarginを削除 */ body, h1, h2, h3, h4, h5, h6, ul[class], ol[class], li, figure, figcaption, blockquote, dl { margin: 0; } /* bodyのデフォルトを定義 */ body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; } /* class属性を持つul、ol要素のリストスタイルを削除 */ ul[class], ol[class] { list-style: none; } /* classを持たない要素はデフォルトのスタイルを取得 */ a:not([class]) { text-decoration-skip-ink: auto; } /* img要素の扱いを簡単にする */ img { max-width: 100%; margin: auto; } img { display: block; } /* iframe */ iframe { max-width: 100%; margin: auto; } iframe { display: block; } /* Natural flow and rhythm in articles by default */ /* article要素内の要素に自然な流れとリズムを定義 article > * + * { margin-top: 1em; } */ /* inputやbuttonなどのフォントは継承を定義 */ input, button, textarea, select { font: inherit; } /* Remove all animations and transitions for people that prefer not to see them */ /* 見たくない人用に、すべてのアニメーションとトランジションを削除 */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /*---------------------- Inview ----------------------*/ /* .effect { overflow: hidden; } */ .ef-fade, .ef-fade01, .ef-zoom, .ef-rotate { transition: .6s; } .ef-fade:nth-child(even) { transition: .9s; } .ef-fade:nth-child(3) { transition: 1.2s; } .ef-fade { opacity: 0; transform: translate(0, 60px); -webkit-transform: translate(0, 60px); } .fade { opacity: 1; transform: translate(0, 0); -webkit-transform: translate(0, 0); } .ef-fade01 { opacity: 0; } .fade01 { opacity: 1; } .ef-zoom { transform: scale(0, 0); -webkit-transform: scale(0, 0); } .zoom { transform: scale(1, 1); -webkit-transform: scale(1, 1); } .ef-rotate { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); } .rotate { transform: rotateY(360deg); -webkit-transform: rotateY(360deg); } /*---------------------- Customize --------------------- */ html { scroll-behavior: smooth; } body { color: #334; font-size: 1rem; line-height: 1.5; font-family: sans-serif; -webkit-text-size-adjust: 100%; /* mobile safariの自動文字サイズ調整をoffにする */ -webkit-tap-highlight-color: transparent; /* モバイルでタッチ時のハイライトカラーを消す */ -webkit-font-smoothing: antialiased; /* 文字のアンチエイリアスをきれいに表示 */ -moz-osx-font-smoothing: grayscale; } /* section { background-color: transparent; } section { background-color: rgba(255,255,255,1); } section:nth-child(odd) { background-color: rgba(255,248,230,.7); } section:nth-child(even) .grid { direction: rtl; } section:nth-child(even) .grid > * { direction: ltr; text-align: start; } */ a { text-decoration: none; } a:hover { text-decoration: underline; } h1 span, h2 span, h3 span, h4 span { display: inline-block; } table { border-collapse: collapse; } /*---------------------- ⭐カラー調整 ----------------------*/ body { color: #333; background-color: #ddc3; } section:nth-child(even) { position: relative; } section:nth-child(even):before { content: ''; position: absolute; width: 100%; height: 100%; background-color: #f9f9d4; z-index: -1; } /*a { color: #fff; }*/ /*h1,h2 { color: #fff; }*/ /*h3 { color: #fff; }*/ /*h4 { color: #fff; }*/ /*section.timothy { background: #f7f2e7 url(bg01.png) no-repeat 50% 100% / contain; background-attachment: inherit; }*/ section.accent { background: #f7f2e7 url(bg03.jpg) no-repeat 50% 50%; background-size: cover; } section.accent.org { background: #f7f2e7 url(bg04.jpg) no-repeat 50% 50%; background-size: cover; } section.timothy { background: #f7f2e7 url(bg01.png) no-repeat 0% 100%; background-size: cover; } section.timothy.rvs { background: #f7f2e7 url(bg01rvs.png) no-repeat 100% 0%; background-size: 100%; } /*---------------------- light --------------------- */ section.light { background-color: #f8f8f4; } /*---------------------- Dark --------------------- */ section.dark { color: #eee; background-color: #357; } /*---------------------- Form ----------------------*/ input[type="text"], input[type="email"], input[type="password"], textarea { width: 100%; max-width: 800px; } textarea { height: 9em; } input[type="submit"] { margin: 1rem auto; padding: .6rem 1.2rem; color: #fff; cursor: pointer; border: none; border-radius: .2rem; background-color: #06c; transition: .3s; -webkit-appearance: none; } input[type="submit"]:hover { background-color: #39f; } /*---------------------- ※印つき