@charset "UTF-8"; /* common */ :root { --font-sans-serif: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; --font-serif: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; --font-color: #1F2667; --link-font-color: #fff; --link-bg-color: linear-gradient(50deg, #829fff, #1ebeff, #47e9d8); --link-font-hover: #f00; --link-bg-hover: linear-gradient(50deg, #fff, #1ebeff, #47e9d8); --em-font-bg-color: linear-gradient(rgba(254, 254, 152, 0) 40%, #ede939 40%); } body { font-family: var(--font-sans-serif); color: var(--font-color); padding: 0; -webkit-text-size-adjust: 100%; } main { overflow: hidden; } /*carousel レスポンシブ対応*/ .carousel-item { padding: calc(700 / 1920 * 100%) 0 0; height: auto; } .carousel-item img { top: 0; left: 0; width: 100%; height: 100%; } section { padding: 4rem 0; } section:nth-of-type(odd) { background: #fff; } section:nth-of-type(even) { background: #f5f5f5; } section.link-section { background: rgb(31 38 103 / 10%); } .text-justify { text-align: justify; } .line { background: var(--em-font-bg-color); } .btn { color: var(--link-font-color); background: var(--link-bg-color); border: 0; transition: background all 0.1s ease; } .btn:hover { color: #829fff; background: #fff; border: 0; box-shadow: inset 0 0 0 4px #829fff, 0 0 1px rgba(0, 0, 0, 0); transition: all .1s ease; } .btn svg { -webkit-transform: translateZ(0); transform: translateZ(0); /* Z軸方向の移動 */ -webkit-transition-duration: 0.1s; transition-duration: 0.1s; /* 変化が完了するまでの時間 */ -webkit-transition-property: transform; transition-property: transform; /* 効果を適用するプロパティ */ -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; vertical-align: text-bottom; margin-left: 10px; } .btn:hover svg { -webkit-transform: translateX(5px); transform: translateX(5px); } .fixed-banner a { color: var(--link-font-color); text-decoration: none; position: fixed; right: 1rem; bottom: 1rem; max-width: 500px; width: 80%; height: 60px; border-radius: 50px; background: var(--link-bg-color); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 15px #ccc; } .fixed-banner img { height: 60px; } .fixed-banner p { margin: 0 5px; line-height: 1.2; } .fixed-banner svg { margin-right: 10px; } .fixed-banner a:hover { color: #829fff; background: #fff; border: 0; box-shadow: inset 0 0 0 4px #829fff, 0 0 1px rgba(0, 0, 0, 0); } /* list */ section ul { list-style-type: none; border: solid 5px #ede939; padding: 10px 5px; display: inline-block; } section li { text-indent: -1.35rem; padding-left: 1.35rem; } section li:before { content: "•"; color: var(--font-color); margin: 0 0.5em; } /* 文字のグラデ */ .text_gradient { background: linear-gradient(-60deg, #e60012 10%, #009fe8 90%); color: transparent; -webkit-background-clip: text; background-clip: text; } .card { border: 2px solid rgba(0, 0, 0, .125); border-radius: 0; } footer p { margin: 0.5rem 0 5rem; font-size: 13px; } /* 画像2列 */ .grid02 { text-align: center; } .grid02 img { width: 100%; max-width: 650px; } @media (min-width: 992px) { .grid02 { display: grid; grid-template-columns: repeat(2, 1fr); margin: 20px 0; } .grid02 img { width: 100%; } } /* 画像3列 */ .grid03 { text-align: center; } .grid03 img { margin: 10px 0; width: 100%; } @media (min-width: 576px) { .grid03 { display: grid; grid-template-columns: repeat(2, 1fr); margin: 20px 0; } .grid03 img { width: 100%; } } @media(min-width:768px) { .grid03 { grid-template-columns: repeat(3, 1fr); } } /* 画像4列 */ .grid04 { text-align: center; } .grid04 img { width: 100%; max-width: 650px; } @media(min-width:768px) { .grid04 { display: grid; grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .grid04 { display: grid; grid-template-columns: repeat(4, 1fr); margin: 20px 0; } .grid04 img { width: 100%; } } .disc:before { content: "●"; color: #ede939; display: inline-block; margin-right: 0.3rem; vertical-align: text-bottom; } .poyo { animation: poyo 2s ease-out infinite; opacity: 1; } @keyframes poyo { 0%, 40%, 60%, 80% { transform: scale(1.0); } 50%, 70% { transform: scale(0.95); } } .img-box { position: relative; width: 100%; height: 240px; overflow: hidden; } .img1, .img2, .img3, .img4, .img5 { width: 100%; height: 240px; position: absolute; top: 0; left: 0; background: center center no-repeat; animation: anime 25s 0s infinite; z-index: 0; opacity: 0; } .img1 { background-image: url(../img/canvas01-01.jpg); } .img2 { background-image: url(../img/canvas01-02.jpg); animation-delay: 5s; /* 2枚目は5秒後に開始 */ } .img3 { background-image: url(../img/canvas01-03.jpg); animation-delay: 10s; /* 2枚目は5秒後に開始 */ } .img4 { background-image: url(../img/canvas01-04.jpg); animation-delay: 15s; /* 2枚目は5秒後に開始 */ } .img5 { background-image: url(../img/canvas01-05.jpg); animation-delay: 20s; /* 2枚目は5秒後に開始 */ } @keyframes anime { 0% { /* 開始 */ opacity: 1; } 50% { /* 5秒目の指定 */ opacity: 1; } 60% { /* 6秒目の指定 */ opacity: 0; transform: scale(1.2); z-index: 10; } 100% { /* 終了 */ opacity: 0; transform: scale(1.2); } }