/* カスタム CSS をここに入力してください */
/*--------------------------------------------------------------
基本 フォント
--------------------------------------------------------------*/
.sns-saido2 {
margin: 15px 0 0 auto;
width:130px;
text-align: right;
}
/*--------------------------------------------------------------
新ヘッダー用
--------------------------------------------------------------*/
.tua-botan{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.tua-botan .botan{
border: solid 1px #000;
padding: 15px;
width: 100%;
height: 50px;
position: relative;
font-weight: 700;
text-align: center;
margin: 0 auto 45px auto;
background-color: #D63A25;
color: #fff;
font-size: 1.2rem;
}
.tua-botan .botan a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.tua-botan .botan::before{
content: '';
display: inline-block;
width: 25px;
height: 25px;
background-image: url(https://smile.toyotahome.co.jp/magazine/wordpress/wp-content/uploads/2024/03/アートボード-1.png);
background-size: contain;
vertical-align: middle;
background-repeat: no-repeat;
position: absolute;
top:50%;
left:30%;
transform: translate(-50%, -50%);
}
.tua-botan .botan2{
border: solid 1px #000;
padding: 15px;
width: 100%;
height: 50px;
position: relative;
font-weight: 700;
text-align: center;
margin: 0 auto 0 auto;
background-color: #fff;
font-size: 1.2rem;
}
.tua-botan .botan2 a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
@media screen and (max-width: 1280px) {
.tua-botan .botan::before{
width: 25px;
height: 25px;
top:50%;
left:20%;
transform: translate(-50%, -50%);
}
}
@media screen and (max-width: 768px) {
.tua-botan .botan::before{
width: 4vw;
height: 4vw;
top:50%;
left:20%;
transform: translate(-50%, -50%);
}
.tua-botan .botan{
font-size: 2vw;
}
.tua-botan .botan2{
font-size: 2vw;
}
}
@media screen and (max-width: 450px) {
.tua-botan .botan::before {
width: 4vw;
height: 4vw;
top: 50%;
left: 3vw;
transform: translate(-50%, -50%);
}
.tua-botan .botan{
font-size: 3vw;
}
.tua-botan .botan2{
font-size: 3vw;
}
}
@media screen and (max-width: 360px) {
.tua-botan .botan::before {
width: 4vw;
height: 4vw;
top: 50%;
left: 3vw;
transform: translate(-50%, -50%);
}
.tua-botan .botan{
font-size: 3vw;
}
.tua-botan .botan2{
font-size: 3vw;
}
}
.top-hsuri {
font-size: 1.2rem;
text-align: center;
margin: 10px 0 15px 0;
letter-spacing: 1px;
}
.hedo-gazou{
height: 0;
/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
padding-top: 56.19047619%;
background: url('https://smile.toyotahome.co.jp/magazine/wordpress/wp-content/uploads/2024/04/ga.svg') 0 0 no-repeat;
background-size: contain;
position: relative;
}
.nanba{
position: absolute;
bottom:0;
right:0;
}
.tuki{
position: absolute;
top:78%;
left:50%;
transform: translate(-50%, -50%);
}
.may01{
position: absolute;
top:-1vw;
left:-1vw;
}
.bura01{
position: absolute;
bottom:3vw;
left:5vw;
}
.tokusyu{
position: absolute;
bottom:11vw;
right:23vw;
}
.pure{
position: absolute;
top:8vw;
right:8vw;
}
.tuki img{
width:13vw;
height:auto;
}
.nanba img{
width:26vw;
height:auto;
}
.may01 img{
width:38vw;
height:auto;
}
.bura01 img{
width:25vw;
height:auto;
}
.tokusyu img{
width:14vw;
height:auto;
}
.pure img{
width:16vw;
height:auto;
}
.target {
animation: floating-y 4s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
0% {
transform: translateY(-6%);
}
100% {
transform: translateY(6%);
}
}
.target2 {
animation: floating-y 2.5s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
0% {
transform: translateY(-7%);
}
100% {
transform: translateY(7%);
}
}
.target3 {
animation: floating-y 5s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
0% {
transform: translateY(-5%);
}
100% {
transform: translateY(5%);
}
}
.wrapper2 {
animation: floating-x 7.2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-x {
0% {
transform: translateX(-3%);
}
100% {
transform: translateX(3%);
}
}
.wrapper3 {
animation: floating-x 7.2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-x {
0% {
transform: translateX(3%);
}
100% {
transform: translateX(-3%);
}
}
.container5 {
animation: fadein 6s ease-out forwards;
}
.container4 {
animation: fadein 5s ease-out forwards;
}
.container3 {
animation: fadein 2s ease-out forwards;
}
@keyframes fadein {
0% {opacity: 0}
100% {opacity: 1}
}
@media screen and (max-width: 764px) {
.hedo-gazou{
height: 0;
/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
padding-top: 175.917431192%;
background: url('https://smile.toyotahome.co.jp/magazine/wordpress/wp-content/uploads/2024/04/ga9.svg') 0 0 no-repeat;
background-size: contain;
position: relative;
}
.may01 img {
width: 52vw;
height: auto;
}
.pure img {
width: 30vw;
height: auto;
}
.pure {
position: absolute;
top: 6vw;
right: 10vw;
}
.bura01 img {
width: 40vw;
height: auto;
}
.tuki {
position: absolute;
top: 71%;
left: 54%;
transform: translate(-50%, -50%);
}
.tuki img {
width: 30vw;
height: auto;
}
.tokusyu img {
width: 26vw;
height: auto;
}
.tokusyu {
position: absolute;
bottom: 50vw;
right: 6vw;
}
.nanba img {
width: 55vw;
height: auto;
}
.bura01 {
position: absolute;
bottom: 6vw;
left: 2vw;
}
.may01 {
position: absolute;
top: 23vw;
left: -1vw;
}
}
/*--------------------------------------------------------------
物件３分割 変更
--------------------------------------------------------------*/
.osusume-guri {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 50px;
margin: 50px 0 50px 0;
}
@media (max-width: 768px){
.osusume-guri {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
margin: 50px 0 50px 0;
}
}
body {
overflow-x:hidden;
font-family: 'Noto Sans JP', sans-serif;
font-style: normal;
font-weight: 400;
}
h1 {font-family: 'din-2014', 'Noto Sans JP', sans-serif;
color: #000;
}
h2 { font-family: 'din-2014', 'Noto Sans JP', sans-serif;
color: #000;
}
h3 { font-family: 'din-2014', 'Noto Sans JP', sans-serif;
color: #000;
}
h4 { font-family: 'din-2014', 'Noto Sans JP', sans-serif;;
color: #000;
}
h5 { font-family: 'din-2014', 'Noto Sans JP', sans-serif;
color: #000;
}
h6 { font-family: 'din-2014', 'Noto Sans JP', sans-serif;
color: #000;
}
p {
font-family: 'Noto Sans JP', sans-serif;
font-style: normal;
font-weight: 400;
}
a {outline:none;}
a img {outline:none;}
a div {outline:none;}
a img:hover {
opacity: 0.5;
transition: ease all 0.75s;
}
ul {
padding-left: 15px;
}
.header-clone {
display: none;
}
.site-header {
position: relative;
top: 35px;
left: 0;
width: 100%;
z-index: 1000;
background-color: transparent;
padding: 0px 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.content-wrapper {
padding: 0px !important;
}
.page-wrap .content-wrapper {
padding-top: 0px !important;
padding-bottom: 15px;
background-color: #fff;
}
.go-top {
position: fixed !important;
right: 20px;
bottom: -15px;
color: #fff;
display: block;
font-size: 22px;
line-height: 35px;
text-align: center;
width: 48px;
height: 48px;
visibility: hidden;
border-radius: 68px;
-webkit-border-radius: 68px;
-moz-border-radius: 68px;
border-radius: 68px;
background: #4d4d4d;
background-color: rgb(77, 77, 77);
}
.go-top::before {
content: "TOP";
position: absolute;
bottom: 7px;
left: 0;
color: #fff;
right: 0;
font-size: 12px;
}
.go-top .fa {
margin-top: 10px;
}
.go-top:hover {
opacity: 0.5;
background: #4d4d4d;
color: #fff;
}
.sido-waid{
max-width: 100%;
}
.saido-yoko{
max-width: 250px;
}
#secondary {
position: sticky;
top: 0;
overflow-y: scroll;
height: 100vh;
scrollbar-width: none;/* firefox */
-ms-overflow-style: none;
}
#secondary::-webkit-scrollbar{/* chrome */
display: none;
}
.site-footer, .site-footer a {
color: #000;
}
.site-footer {
background-color: #fff;
line-height: 35px;
padding: 15px 0;
}
.entry-content{
margin:0;
}
@media (min-width: 1350px){
.container {
width: 1320px;
}
}
@media (max-width: 1350px){
.container {
width: 1120px;
}
.saido-yoko{
max-width: 210px;
}
}
@media (max-width: 1150px){
.container {
width: 980px;
margin:0;
}
.saido-yoko{
max-width: 180px;
}
}
@media (max-width: 1024px){
.container {
width: 100%;
}
.saido-yoko{
max-width: 500px;
margin:50px auto;
}
.col-md-9 {
width: 100%;
}
.content-area .post-wrap, .contact-form-wrap {
padding-right: 0px;
}
.col-md-3 {
width: 100%;
}
html {
overflow-x:hidden;
}
#secondary{
display:none;
}
.page-wrap {
padding-top: 60px;
}
.entry-content{
margin:0 15px;
}
}
a {
opacity: 0.2;
transform: translateY(10px);
transition: opacity 2s;
}
a.show {
opacity: 1;
transform: translateY(0);
}
.content-area .hentry {
position: relative;
padding-top: 0px;
padding-bottom: 20px;
}
.saido-yoko a{
opacity: 1 !important;
}
.botan-akaibu{
border: solid 1px #000;
margin:30px 0 0 auto;
}
a.botan-akaibu {
color: #000;
margin:30px auto 0 auto;
padding:10px 15px;
}
.rinku30{
margin:30px 0;
text-align: right;
}
/*--------------------------------------------------------------
p
--------------------------------------------------------------*/
.h30{
height:300px;
}
.h45{
height:45px;
}
.pc99{
display:block;
}
.sp99{
display:none;
}
.aa16{
font-size:16px;
}
.aa18{
font-size:18px;
}
.aa-supe{
letter-spacing: 1.3px;
}
.tt15{
margin-bottom:15px;
}
.tt45{
margin-bottom:45px;
}
.tt-ue45{
margin-top:45px;
}
.tt90{
margin-bottom:90px;
}
.ttue-90{
margin-top:90px;
}
.tt150{
margin-bottom:150px;
}
.se-top1{
margin:0;
}
.my-moji6{
font-size:1.1rem;
text-align: center;
font-weight: 700;
margin-top:6px;
}
.pp-post-my-img{
width:100%;
height:auto;
}
.taitoru-manga55 img{
width:100%;
margin:10px auto;
}
@media screen and (max-width: 768px) {
.se-top1{
margin:0 15px;
}
.pp-post-home {
display: grid;
grid-template-columns: 1fr;
gap: 50px;
margin-bottom: 60px;
}
}
@media screen and (max-width: 1360px) {
.cont2-guri .vu-botan {
font-size: 12px;
}
}
@media screen and (max-width: 1160px) {
.cont2-guri .vu-botan {
font-size: 12px;
}
.pp-post-home {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px;
margin-bottom: 60px;
}
}
@media screen and (max-width: 768px) {
.pp-post-home {
display: grid;
grid-template-columns: 1fr;
gap: 50px;
margin-bottom: 60px;
}
}
/* 404 */
.search_in {
display: flex;
background: #fafafa;
border-radius: 7px;
outline: 1px solid #ddd;
transition: ease all 0.5s;
margin: 40px auto;
}
.search_i[type="text"] {
width: 100%;
border: none;
outline: none;
}
.search_b::before {
content: "";
background: url('https://smile.toyotahome.co.jp/magazine/wordpress/wp-content/uploads/2023/03/icon_search_bk.svg') no-repeat;
background-size: auto;
background-size: contain;
width: 30px;
height: 30px;
position: absolute;
left: 0;
}
.search_b {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: none;
border: none;
padding: 0;
width: 50px;
opacity: 0.5;
}
.search_i[type="text"]:hover, .search_i[type="text"]:focus, .search_i[type="text"]:active {/* reset */
border: none;
outline: none;
}
.search_i[type="text"]:hover, .search_i[type="text"]:focus, .search_i[type="text"]:active {/* reset */
border: none;
}
.search_in:hover, .search_in:focus, .search_in:active {
outline: 1px solid #717171;
border: none;
}
#searchsubmit:hover {
opacity: 1;
}
#searchform {
max-width: 15vw;
transition: ease all 1s;
}
#searchform:hover, #searchform:focus, #searchform:active {
max-width: 500px;
}
@media screen and (max-width: 768px) {
.not-found {
margin: 0 15px;
}
#searchform {
max-width: 100%;
}
.not-found h3 {
font-size: 2rem;
}
.search_b::before {
width: 25px;
height: 25px;
}
}
