@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;900&family=Poppins:wght@400;600;700;900&family=Noto+Serif+JP:wght@400;600;700;900&display=swap');

/*paddingとborderがwidthとheightの中に含まれるようになる*/
*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; }

.pc { display: inline-block; }
.sp { display: none; }

a { text-decoration: underline; color: #004ea2; }
a:hover { text-decoration: none; color: #004ea2; }
a:visited { color: #004ea2; }

img, svg { max-width: 100%; height: auto; }
a,a:hover { transition : all 0.5s; }
a img,a:hover img { transition: 0.3s; }
a:hover img { opacity: 0.6; }

/* FADE定義 */

.fade { opacity: 0; }
.fadeRight { animation-name: fadeRightAnime; animation-duration: 0.8s; animation-fill-mode:forwards; opacity: 0; }
@keyframes fadeRightAnime{ from { opacity: 0; transform: translateX(75px); } to { opacity: 1; transform: translateX(0); } }

/* ベース定義 */

html { scroll-behavior: smooth; }

body { font-size: 100%; line-height: 220%; color: #333333; background-color: #ffffff; font-family: 'Noto Sans JP'; font-weight: 400; margin: 0; padding: 0; overflow-x: hidden; }

#company svg { width: 141px; margin: 31px 30px 20px; }
#company svg .st0 { fill: #004ea2; }
#company svg .st1 { fill: #ed6c00; }
#company svg .st2 { fill: #00a7db; }

header { width: 100%; background: linear-gradient(rgba(0, 0, 0, 0.0),  rgba(0, 0, 0, 0.6)),url("../images/header-background.jpg") no-repeat left top; background-size: cover; height: 650px; overflow: hidden; position: relative; }
header span { display: block; padding: 20px; position: absolute; top: 40%; text-align: center; width: 100%; font-size: 200%; letter-spacing: 2px; color: #fff; text-shadow: 1px 1px 10px #000; line-height: 150%; }

div.content { max-width: 980px; margin: 20px auto 40px; padding: 0 40px; }

div.title { position: relative; padding: 0 0 0 0; line-height: 350%; min-height: 75px; margin: 0 0 20px 0; border-bottom: 1px solid #ccc; font-size: 150%; }
div.title span { font-size: 400%; font-weight: 700; position: absolute; color: rgba(236,109,129,0.3); z-index: 0; }
div.title span:nth-of-type(2) { z-index: 100; font-size: 150%; color: #333; padding: 20px 0 0 20px; font-family: 'Noto Serif JP', serif; font-weight: 400; }

div.caution { border: 1px solid #f8b788; padding: 10px 20px; font-size: 95%; background-color: #fff0e5; max-width: 940px; }
div.caution ul { padding-left: 20px; }

#page_top { position: fixed; right: 60px; bottom: -150px; opacity: 1; z-index: 999; }
#page_top a { position: relative; display: block; transition: 0.5s; }
#page_top a::before { bottom: 0; right: 0; left: 0; margin: auto; text-align: center; opacity: 0.6; }
#page_top a:hover { opacity: 0.6; }

#footer { background-color: #000; padding: 20px 0; margin: 100px 0 0 0; }
#footer span { color: #fff; text-align: center; display: block; font-size: 85%; }

/*個別設定*/