@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600&display=swap'); /* wrapcloth page css */ /* titbox */ .bg-image { height: 420px; div{ max-width: 1140px; margin: 0 auto; background-image:url(./images/fullinsatsutit.jpg); background-size: cover; background-position: 100% 0%; } } .titbox{ float: left; display: block; width: 440px; min-height: 235px; padding: 15px 20px; opacity: 0.85; box-shadow: 3.5px 3.5px 10px 0 rgba(110, 146, 106, 0.8); background-image: conic-gradient(from 0.25turn, rgba(202, 253, 191, 1), rgba(254, 178, 190, 1) 0.3turn, rgba(125, 241, 255, 1) 0.58turn, rgba(254, 253, 166, 1) 0.82turn, #cafdbf); } .tittxt, .readtxt{ color: #333; } .tittxt{ margin: 0 28px 0 0; text-shadow: #FFF 3px 3px 1px; //text-stroke: 3px #fff; font-family: 'Noto Sans JP', sans-serif; font-size: 30px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.39; letter-spacing: normal; text-align: left; color: #000; } .readtxt{ padding: 15px 0 0; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; font-weight: 600; line-height: 1.4; text-align: left; } @media screen and (max-width: 911px) { .bg-image div{ max-width: none; width: 100%; margin: 0 auto; background-image:url(./images/fullinsatsutit-sp.jpg); background-size: cover; } .titbox{ float: none; margin: 50px auto 0; } } @media screen and (max-width: 577px) { .titbox{ margin: 8% auto 0; padding: 15px 10px; width: 100%; min-height:initial; } .tittxt{ font-size: 24px; line-height: 1.2; } .readtxt{ margin: 0; padding: 10px 0 0 3px; line-height: 1.5; } } .read{ margin-bottom: 65px; } /* -------------------------------------- cont0 -------------------------------------- */ .cont0{ width: 100%; background-color: #bcefea; .boxhead{ padding: 70px 0; text-align: center; img{ width: 100%; max-width: 880px; height: auto; } h2{ margin-top: 17px; font-family: 'Noto Sans JP', sans-serif; font-size: 26px; letter-spacing: 7.8px; } } .cont0list{ list-style: none; margin: 0 auto; padding: 0; max-width: 980px; li{ padding-bottom: 70px; &:last-child{ padding-top: 30px; } } .boxtit{ position: relative; margin: 0 0 30px 0; padding: 6px 0 0 75px; font-family: 'Noto Sans JP', sans-serif; font-size: 30px; font-weight: bold; line-height: 1.6; text-align: left; color: #353d5f; span{ position: absolute; display: block; width: 55px; height: 55px; background-color: #ff9e2b; border-radius: 28px; color: #fff; font-size: 40px; font-weight: bold; text-align: center; line-height: 1.5; top: 0; left: 0; } } .boxtxt{ padding-left: 75px; max-width: 905px; b{ color: #f00;} } .bot{ position: relative; display: block; margin-top: -30px; margin-left: 20px; padding-left: 40px; font-size: 24px; line-height: 1.25; text-align: left; color: #323e6e; text-decoration: none; &:hover{ color: #c93834; } &::before{ position: absolute; display: block; width: 22px; height: 22px; content: ''; left: 0; background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M438.6%20278.6c12.5-12.5%2012.5-32.8%200-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L338.8%20224%2032%20224c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l306.7%200L233.4%20393.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l160-160z%22%2F%3E%3C%2Fsvg%3E'); background-size: cover; background-repeat: no-repeat; background-position: 50%; } } } } @media screen and (max-width: 991px) { .cont0 .cont0list .bot{ margin-top: 15px; } } @media screen and (max-width: 767px) { .cont0 .cont0list{ .box2imglast{ padding-top: 20px; } .box3img{ display: block; margin: 0 auto; max-width: 400px; } .bot{ margin-top: 15px; } } } @media screen and (max-width: 575px) { .cont0 .boxhead h2{ font-size: 24px; letter-spacing: 0; } .cont0 .cont0list{ padding: 0 0 0 10px; .boxtit{ margin: 0 0 25px 0; padding: 6px 0 0 50px; font-size: 24px; span{ width: 40px; height: 40px; border-radius: 20px; font-size: 26px; top: 0; left: 0; } } .boxtxt{ padding-left: 50px; } .box3img{ max-width: 300px; } } } /* -------------------------------------- cont1 -------------------------------------- */ .cont1{ width: 100%; padding: 90px 0 80px; background-color: #ffc660; } @media screen and (max-width: 767px) { .cont1{ padding: 20px 0; .cont1imglast{ margin-top: 15px; } } } /* -------------------------------------- cont2 -------------------------------------- */ .cont2{ padding: 70px 0 100px; .box1{ max-width: 530px; padding: 26px 18px; border: dotted 2px #010101; border-radius: 15px; h3{ border-left: solid 4px #333; padding-left: 15px; } img{ display: block; width: 100%; max-width: 345px; margin: 0 auto; } } } @media screen and (max-width: 991px) { .cont2{ padding: 70px 0 0; .box1{ width: 100%; max-width: none; margin-bottom: 15px; } } } table.spectad{ width: 95%; margin:40px 0 40px 10px; th,td{ border-bottom: dotted 1px #010101; padding: 8px 0; } tr:last-child th,tr:last-child td{ border-bottom: none; } } .botbox a{ position: relative; display: block; background-color: #c93834; border-radius: 30px; padding: 20px 20px 15px 60px; font-size: 24px; line-height: 1; color: #fff; text-decoration: none; } .botbox a:hover{ opacity: .8; } .icon-email{ position: absolute; display: block; content: ''; width: 26px; height: 20px; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJz48cGF0aCBkPSdNNjQgMTEyYy05IDAtMTYgNy0xNiAxNnYyMmwxNzMgMTQyYzIwIDE3IDUwIDE3IDcxIDBsMTcyLTE0MnYtMjJjMC05LTctMTYtMTYtMTZINjR6TTQ4IDIxMnYxNzJjMCA5IDcgMTYgMTYgMTZoMzg0YzkgMCAxNi03IDE2LTE2VjIxMkwzMjIgMzI5Yy0zOCAzMS05NCAzMS0xMzIgMEw0OCAyMTJ6TTAgMTI4YzAtMzUgMjktNjQgNjQtNjRoMzg0YzM1IDAgNjQgMjkgNjQgNjR2MjU2YzAgMzUtMjkgNjQtNjQgNjRINjRjLTM1IDAtNjQtMjktNjQtNjRWMTI4eicgZmlsbD0nI2ZmZicvPjwvc3ZnPg=="); background-repeat: no-repeat; background-size: 26px 20px; top: calc( 50%-20px ); left: 20px; } .botbox .caption{ margin: 15px 0 0 20px; font-size: 12px; } @media screen and (max-width: 991px) { table.spectad{ width: 100%; margin: 15px 0 30px; } table.spectad th{ white-space: nowrap; padding: 8px 15px 8px 0; } }