body{
font-family: "s_m";
opacity: 0;
transition: 0.5s;
padding-top: 151px;
}
body.show{
opacity: 1;
}
#toTop {
opacity: 0;
visibility: hidden;
width: 5vw;
height: 5vw;
min-width: 50px;
min-height: 50px;
max-height: 60px;
max-width: 60px;
background-color: #023594;
border-radius: 10px;
position: fixed;
bottom: 1%;
right: 1%;
transition: 0.3s;
z-index: 1;
}
#toTop.show{
opacity: 1;
visibility: visible;
}
#toTop:hover{
opacity: 0.6;
}
#toTop span{
display: block;
position: relative;
height: 100%;
}
#toTop span::before{
content: '';
width: 40%;
height: 40%;
border-top: 5px solid #fff;
border-right: 5px solid #fff;
position: absolute;
top: 10px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
transform: rotate(-45deg);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
} #product_shousai .detail-table{
border-top: 2px solid #014099;
border-right: 2px solid #014099;
border-bottom: 2px solid #014099;
}
#product_shousai .detail-table .table-item{
display: table;
width: 100%;
}
#product_shousai .detail-table .table-item .item-name{
width: 20%;
min-width: 150px;
padding: 0 0 0 10px;
background-color: #004199;
display: table-cell;
border-bottom: 1px solid #fff;
}
#product_shousai .detail-table .table-item .item-name p{
color: #fff;
}
#product_shousai .detail-table .table-item .item-text{
width: 100%;
background-color: #fff;
position: relative;
padding: 10px;
display: table-cell;
border-bottom: 1px solid #024199;
word-break: break-all;
}
#product_shousai .detail-table .table-item:last-child .item-name,
#product_shousai .detail-table .table-item:last-child .item-text{
border-bottom: 0px solid ;
}
#product_shousai .detail-table .table-item .color-price {
display: flex;
} .purchase-list{
}
.purchase-list .sec-ttl{
margin-bottom: 3%;
text-align: center;
}
.purchase-list .sec-ttl p{
font-size: 120%;
}
.purchase-list .link{
text-align: right;
margin: 5px 0;
}
.purchase-list .link a{
border-bottom:1px solid;
transition: 0.3s;
}
.purchase-list .link a:hover{
opacity: 0.6;
}
.purchase-list .purchase-list-box{
overflow: auto;
border-right: 2px solid #024199;
border-left: 2px solid #024199;
border-bottom: 2px solid #024199;
}
.purchase-list .purchase-list-box .list-table{
width: 100%;
min-width: 500px;
}
.purchase-list .purchase-list-box .list-table tr{
border-top: 1px solid #024199;
}
.purchase-list .purchase-list-box .list-table tr:first-child{
background-color: #004199;
}
.purchase-list .purchase-list-box .list-table th,
.purchase-list .purchase-list-box .list-table td{
padding: 5px 10px;
}
.purchase-list .purchase-list-box .list-table tr:first-child th,
.purchase-list .purchase-list-box .list-table tr:first-child td{
color: #fff;
text-align: center;
padding: 10px;
}
.purchase-list .purchase-list-box .list-table tr:first-child td{
border-left:1px solid #fff;
}
.purchase-list .purchase-list-box .list-table th{
min-width: 120px;
}
.purchase-list .purchase-list-box .list-table td{
border-left: 1px solid #024199;
min-width: 230px;
}
.purchase-list .purchase-list-box .list-table td:last-child{
min-width: 150px;
}
.purchase-list .purchase-list-box .list-table td a{
color: #024199;
display: inline-block;
transition: 0.3s;
border-bottom:1px solid transparent;
}
.purchase-list .purchase-list-box .list-table td a:hover{
border-bottom:1px solid;
}
@media (max-width:768px){
.purchase-list .purchase-list-box .list-table th,
.purchase-list .purchase-list-box .list-table td {
font-size: 18px;
}
body {
padding-top: 106px;
}
}
@media (max-width:480px){
.purchase-list .purchase-list-box .list-table th,
.purchase-list .purchase-list-box .list-table td {
font-size: 18px;
}
} #header_wrap {
position: fixed;
width: 100%;
z-index: 20;
top: 0;
}
#top_header {
padding-top: 10px;
}
#top_header .logo_box {
width: 10%;
}
#top_header .logo_box .logo_text {
font-size: 1.3vw;
}
.phone_box a {
font-size: 28px;
}
#g_nav .navbox .dropdown, .navbox a li {
height: 45px;
font-size: 15px;
}
.box_left p {
font-size: 12px;
}
.top_right_box {
display: block;
}
.top_right_box .center {
text-align: center;
font-size: 15px;
line-height: 1.6;
margin-bottom: 1%;
}
.top_right_box .flex {
display: flex;
}
#header_wrap .sns_box {
display: none;
}
#section4-2 .textbox p, #section4-2 .txt_center, .stei_up p {
font-size: 20px;
}
@media screen and (max-width: 768px) {
.top_right_box {
display: none;
}
#header_wrap .sns_box {
display: block;
flex: 0 0 25%;
margin-right: 10px;
}
#header_wrap .sns_box {
display: block;
flex: 0 0 45%;
margin-right: 10px;
}
#header_wrap .sns_box .flex_box {
display: flex;
justify-content: center;
}
#header_wrap .sns_box a {
display: block;
flex: 0 0 18%;
margin-right: 6%;
}
#header_wrap .sns_box a:last-child {
margin-right: 0;
}
#header_wrap .sns_box a .img {
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
padding: 50% 0;
}
#header_wrap .sns_box .small {
font-size: 10px;
transform: scale(.8);
margin-top: 4%;
}
#header_wrap .sns_box .small span {
white-space: nowrap;
}
}
@media screen and (max-width: 480px) {
body {
padding-top: 84px !important;
}
.top_text2 {
margin-top: 30px;
}
.main_visual {
padding: 25px 10px;
}
.main_visual h2 {
margin-top: 70px;
font-size: 5.2vw;
}
#product_shousai .detail-table .table-item .item-name {
min-width: 110px;
font-size: 13px;
}
#product_shousai .common_h3 {
color: #eb8698 !important;
}
.reason_text {
font-size: 18px;
}
.note {
width: 90%;
}
#section4-2 .textbox p,
#section4-2 .txt_center,
.stei_up p {
font-size: 18px;
} #section4 .step p {
font-size: 15px;
}
#header_wrap .sns_box {
display: block;
flex: 0 0 45%;
margin-right: 10px;
}
#header_wrap .sns_box {
display: block;
flex: 0 0 45%;
margin-right: 10px;
}
#header_wrap .sns_box .flex_box {
display: flex;
justify-content: center;
}
#header_wrap .sns_box a {
display: block;
flex: 0 0 18%;
margin-right: 6%;
}
#header_wrap .sns_box a:last-child {
margin-right: 0;
}
#header_wrap .sns_box a .img {
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
padding: 50% 0;
}
#header_wrap .sns_box .small {
font-size: 10px;
margin-top: 0;
}
#header_wrap .sns_box .small span {
white-space: nowrap;
}
#top_header .logo_box {
min-width: 135px;
}
#top_header .logo_box .logo_text {
font-size: 13px;
}
.flow_text p{
font-size: 18px;
}
.main_visual .title_flex {
position: relative;
}
.main_visual .title_flex .photobox {
position: absolute;
bottom: -5.5vw;
}
.main_visual .title_flex .photobox:first-child {
left: 0;
}
.main_visual .title_flex .photobox:last-child {
right: 0;
}
.main_visual h1 {
font-size: 6.8vw;
}
.main_visual .title_flex .title_inner_flex h1 {
line-height: 1.4;
}
.main_visual .title_flex .title_inner_flex {
width: 35%;
justify-content: space-between;
}
#product .product_list td a {
color: #eb8698 !important;
}
}
#cam_mainVisual img{
width: 100%;
}
@media screen and (max-width: 640px) {
#cam_mainVisual .pc {
display: none
}
}
@media screen and (min-width: 641px) {
#cam_mainVisual .sm {
display: none
}
}
.cam-linkBtn{
text-align: center;
margin: 100px auto;
}
@media screen and (max-width: 640px) {
.cam-linkBtn{
margin: 40px auto;
}
}
.cam-linkBtn a{
display: inline-block;
padding: 20px 120px 20px 80px;
font-size: 32px;
color: #fff;
background-color: #FF6600;
box-shadow: 12px 12px 0 #EADDD5;
position: relative;
border: 4px solid #FF6600;
}
@media screen and (max-width: 640px) {
.cam-linkBtn a{
font-size: 24px;
padding: 20px 90px 20px 40px;
}
}
.cam-linkBtn a:after{
content: url(//protona.jp/wp-content/themes/twentyseventeen/image/campaign/right-arrow.png);
position: absolute;
top: 50%;
right: 20px;
margin: auto;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.cam-linkBtn a:hover{
background-color: #fff;
color: #FF6600;
border: 4px solid #FF6600;
}
#cam-worries{
background-color: #014099;
background-image: url(//protona.jp/wp-content/themes/twentyseventeen/image/campaign/hatena-deco.png);
background-position: center 0;
background-repeat: no-repeat;
}
@media screen and (max-width: 640px) {
#cam-worries{
background-size: 60%;
}
}
#cam-worries .wrap{
width: 1100px;
max-width: 98%;
margin: 0 auto;
}
#cam-worries .top-box{
margin-top: 30px;
}
#cam-worries h2{
font-size: 38px;
color: #fff;
text-align: center;
}
@media screen and (max-width: 640px) {
#cam-worries h2{
font-size: 18px;
margin-bottom: 20px;
}
}
#cam-worries h2 span{
font-size: 66px;
display: inline-block;
position: relative;
}
@media screen and (max-width: 640px) {
#cam-worries h2 span{
font-size: 30px;
}
}
#cam-worries h2 span:before{
content: '';
background-image: url(//protona.jp/wp-content/themes/twentyseventeen/image/campaign/worries-deco.png);
position: absolute;
top: -8px;
right: -30px;
margin-bottom: 40px;
width: 40px;
height: 34px;
background-size: cover;
}
@media screen and (max-width: 640px) {
#cam-worries h2 span:before{
width: 20px;
height: 17px;
right: -14px;
}
}
#cam-worries h2 span:after{
content: '';
background-image: url(//protona.jp/wp-content/themes/twentyseventeen/image/campaign/worries-border.png);
position: absolute;
bottom: -5px;
right: 0;
left: 0;
margin: auto;
width: 100%;
height: 13px;
background-size: cover;
}
@media screen and (max-width: 640px) {
#cam-worries h2 span:after{
height: 8px;
}
}
#cam-worries .top-box .pic-box{
text-align: center;
}
#cam-worries .top-box img{
position: relative;
bottom: -20px;
width: 80%;
}
@media screen and (max-width: 640px) {
#cam-worries .top-box img{
bottom: 0;
}
}
@media screen and (max-width: 640px) {
#cam-worries .pc {
display: none;
}
}
@media screen and (min-width: 641px) {
#cam-worries .sm {
display: none;
}
}
#cam-worries .bottom-box{
background-color: #fff;
border-radius: 10px;
position: relative;
padding: 60px 40px;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box{
padding: 225px 10px 25px;
}
}
@media screen and (max-width: 450px) {
#cam-worries .bottom-box{
padding: 180px 10px 25px;
}
}
@media screen and (max-width: 400px) {
#cam-worries .bottom-box{
padding: 150px 10px 25px;
}
}
#cam-worries .bottom-box h3{
position: relative;
top: -90px;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box h3{
position: absolute;
top: -45px;
}
}
#cam-worries .bottom-box h3 img{
width: 90%;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box h3 img{
width: 100%;
}
}
#cam-worries .bottom-box .inner{
border: 5px solid #FF6600;
border-radius: 5px;
position: relative;
padding: 45px 30px 40px;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box .inner{
border: 2px solid #FF6600;
padding: 25px 10px 30px;
}
}
#cam-worries .bottom-box h4{
font-size: 30px;
position: absolute;
top: -38px;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box h4{
font-size: 18px;
top: -25px;
}
}
#cam-worries .bottom-box h4 span{
border-radius: 50px;
padding: 10px 50px;
background-color: #FF6600;
color: #fff;
display: inline-block;
}
#cam-worries .bottom-box dl{
display: flex;
align-items: center;
border-bottom: 2px solid #000000;
padding: 20px 0;
}
#cam-worries .bottom-box dt{
margin-right: 20px;
display: flex;
align-items: center;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box dt{
margin-right: 10px;
}
}
#cam-worries .bottom-box dt img{
width: 48px;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box dt img{
width: 28px;
}
}
#cam-worries .bottom-box dd{
font-size: 20px;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box dd{
font-size: 16px;
}
}
#cam-worries .bottom-box .text{
text-decoration: underline;
font-size: 20px;
margin-top: 20px;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box .text{
font-size: 16px;
}
}
#cam-worries .bottom-box .note{
font-size: 20px;
color: red;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box .note{
font-size: 16px;
}
}
.cam-item{
background-color: #F7F7F7;
}
.cam-item .wrap{
width: 1200px;
margin: 0 auto;
max-width: 98%;
}
@media screen and (max-width: 640px) {
.cam-item .wrap{
width: 100%;
margin: 30px auto 0;
}
}
.cam-item h2{
color: #014099;
font-size: 53px;
text-align: center;
}
@media screen and (max-width: 640px) {
.cam-item h2{
font-size: 35px;
}
}
.cam-item .maker{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 80px;
margin-top: 40px;
}
@media screen and (max-width: 640px) {
.cam-item .maker{
margin-bottom: 35px;
margin-top: 25px;
}
}
.cam-item .maker li{
font-size: 20px;
padding: 5px 35px;
border-radius: 50px;
border: 3px solid #014099;
margin: 10px;
cursor:pointer;
background-color: #fff;
}
@media screen and (max-width: 640px) {
.cam-item .maker li{
font-size: 15px;
margin: 5px;
}
}
.cam-item .maker li:last-child{
margin-right: 0;
}
.cam-item .item{
width: 1000px;
margin: 0 auto;
max-width: 98%;
}
.cam-item .item h3{
color: #014099;
background-color: #E8F1FF;
padding: 10px 15px;
font-size: 30px;
}
@media screen and (max-width: 640px) {
.cam-item .item h3{
font-size: 25px;
}
}
.cam-item .item p{
background-color: #fff;
padding: 20px;
font-size: 18px;
}
.cam-item .item-content{
display: none;
}
.cam-item .maker .active{
color: #fff;
background-color: #014099;
border: 3px solid #014099;
}
.cam-item .active{
display: block;
}
.item-content .item{
margin-bottom: 80px;
}
@media screen and (max-width: 640px) {
.item-content .item{
margin-bottom: 40px;
}
}
.item-content h4{
font-size: 30px;
color: #014099;
border-bottom: 3px solid #014099;
margin: 60px auto 30px;
}
@media screen and (max-width: 640px) {
.item-content h4{
font-size: 20px;
margin: 40px auto 20px;
}
}
.item-content li{
display: flex;
border-top: 2px solid #014099;
border-left: 2px solid #014099;
}
@media screen and (max-width: 640px) {
.item-content li{
display: block;
}
}
.item-content li:last-child{
border-bottom: 2px solid #014099;
}
.item-content li .box{
width: 30%;
background-color: #fff;
text-align: center;
border-right: 2px solid #014099;
}
@media screen and (max-width: 640px) {
.item-content li .box{
width: 100%;
}
}
.item-content li .first{
width: 40%;
}
@media screen and (max-width: 640px) {
.item-content li .first{
width: 100%;
}
}
@media screen and (max-width: 640px) {
.item-content li .second dl{
display: flex;
align-items: center;
border-bottom: 2px solid #014099;
}
}
.item-content li .second dd{
line-height: 200px;
}
@media screen and (max-width: 750px) {
.item-content li .second dd{
line-height: 140px;
}
}
@media screen and (max-width: 640px) {
.item-content li .second dt{
width: 50%;
}
}
@media screen and (max-width: 640px) {
.item-content li .second .midashi{
border-bottom: 0;
border-right: 2px solid #014099;
}
}
@media screen and (max-width: 640px) {
.item-content li .second dd{
width: 50%;
line-height: 0;
}
}
.item-content li .first .inner dl{
display: flex;
}
@media screen and (max-width: 640px) {
.item-content li .first .inner dl{
border-bottom: 2px solid #014099;
}
}
.item-content li .first .inner dt{
width: 50%;
border-right: 2px solid #014099;
}
.item-content li .first .inner dd{
width: 50%;
line-height: 200px;
}
@media screen and (max-width: 750px) {
.item-content li .first .inner dd{
line-height: 140px;
}
}
@media screen and (max-width: 640px) {
.item-content li .first .inner dd{
line-height: 100px;
}
}
.item-content li .first .thumbnail {
width: 80%;
height: 200px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
margin: 0 auto;
}
@media screen and (max-width: 750px) {
.item-content li .first .thumbnail {
height: 140px;
}
}
@media screen and (max-width: 640px) {
.item-content li .first .thumbnail {
height: 100px;
}
}
.item-content li .midashi{
font-size: 18px;
background-color: #E8F1FF;
color: #014099;
text-align: center;
padding: 15px 10px;
border-bottom: 2px solid #014099;
box-sizing: border-box;
}
@media screen and (min-width: 640px) {
.item-content li:not(:first-child) .midashi{
display: none;
}
}
.item-content li dd{
font-size: 16px;
}
@media screen and (max-width: 640px) {
.item-content li .price dl{
display: flex;
}
}
@media screen and (max-width: 640px) {
.item-content li .price dt{
width: 50%;
}
}
@media screen and (max-width: 640px) {
.item-content li .price .midashi{
border-bottom: 0;
border-right: 2px solid #014099;
}
}
.item-content li .price dd{
font-size: 22px;
padding: 60px 10px;
}
@media screen and (max-width: 750px) {
.item-content li .price dd{
font-size: 16px;
padding: 35px 10px;
}
}
@media screen and (max-width: 640px) {
.item-content li .price dd{
width: 50%;
font-size: 16px;
padding: 10px;
box-sizing: border-box;
}
}
.item-content li .price dd span{
color: red;
}
.item-content li .price dd strong{
font-size: 30px;
}
@media screen and (max-width: 750px) {
.item-content li .price dd strong{
font-size: 25px;
}
}
@media screen and (max-width: 640px) {
.item-content li .price dd strong{
font-size: 23px;
}
}
.cam-item .text{
font-size: 14px;
line-height: 1.4;
margin-top: 25px;
}
@media screen and (min-width: 1101px) {
.cam-bn-sm{
display: none;
}
}
@media screen and (max-width: 1100px) {
.cam-bn-pc{
display: none;
}
}
.campaign_box{
margin-right: 15px;
}
.cam-bn-pc img{
height: 55px;
}
.cam-bn{
animation: flash 1.2s linear infinite;
}
@keyframes flash {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
} .stei_up .note__head{
font-size: 24px;
text-align: center;
margin: 0 0 15px;
}
@media screen and (max-width: 960px) {
.stei_up .note .note__head {
font-size: 18px;
}
} .pc-only {
display: block;
}
.sp-only {
display: none;
}
@media screen and (max-width: 480px) {
.pc-only {
display: none;
}
.sp-only {
display: block;
}
.headingText1 {
position: relative;
z-index: 10;
}
.main_visual .title_flex .photobox {
bottom: -14.5vw;
}
.main_visual .title_flex .photobox .pb9{padding: 0 0 9px;}
.purchase-list .purchase-list-box .list-table {
min-width: unset;
}
.purchase-list .purchase-list-box .list-table td {
min-width: unset;
}
.purchase-list .purchase-list-box .purchase-list-box-maker {
font-size: 18px;
text-align: center;
padding: 10.5px 0;
margin-top: 30px;
box-sizing: border-box;
width: 100%;
color: #fff;
background-color:  #024199;
}
}
.purchase-list .purchase-list-box .purchase-list-box-maker {
font-size: 18px;
text-align: center;
padding: 10.5px 0;
margin-top: 30px;
box-sizing: border-box;
width: 100%;
color: #fff;
background-color:  #024199;
}
.purchase-list .purchase-list-box .list-table thead tr:first-child {
border-top: 1px solid #fff;
background-color: #004199;
}
.purchase-list .purchase-list-box .list-table tbody tr:first-child {
background-color: #fff;
}
.purchase-list .purchase-list-box .list-table tr:first-child td {
text-align: left;
}
.purchase-list .purchase-list-box .list-table tr:first-child td:first-child {
border-left: 1px solid #024199;
}
.purchase-list .purchase-list-box .list-table tbody tr td {
text-align: left;
color: #000;
}
.purchase-list .purchase-list-box .list-table tbody tr td span {
text-align: left;
background-color: #fff;
color: #000000;
}
.purchase-list .purchase-list-box .list-table tbody tr td  a {
text-align: left;
}
.purchase-list .purchase-list-box .list-table tbody tr td  a:hover {
text-decoration: none;
border-bottom: none;
}
.purchase-list .purchase-list-box .list-table tbody tr td  a:not(:hover) {
border-bottom: none;
}
.purchase-list .purchase-list-box .list-table td a {
display: block;
text-align: left;
}
.purchase-list .purchase-list-box .list-table tbody tr:first-child td {
color: #000;
border-left: 1px solid #024199;
}
.purchase-list .purchase-list-box {
border-right: none;
border-left: none;
}
.purchase-list .purchase-list-box .list-table {
border-right: 2px solid #024199;
border-left: 2px solid #024199;
border-bottom: 2px solid #024199;
}  #section5 .section-5-pconly {
display: block;
max-width: 410px;
width: 30vw;
position: absolute;
top: 18%;
right: 2vw;
z-index: 1;
}
@media screen and (max-width: 960px) {
#section5 .section-5-pconly {
display: none;
}
}
@media (min-width: 901px) {
#section5 {
position: relative;
background-image: none;
}
#section5 .bg {
z-index: 0;
}
.toner-ink-kaitori #section5 .bg {
z-index: 0 !important;
}
}
.p-mv {
background: url(//protona.jp/wp-content/themes/twentyseventeen/image/kaitori/section2-bg.webp) center center/cover no-repeat;
color: #fff
}
.p-mv__inner {
padding: 3.8194444444vw 23.2638888889vw
}
@media(max-width: 900px) {
.p-mv__inner {
padding:5.1282051282vw 3.8461538462vw
}
}
.p-mv__lead {
font-family: "M PLUS 1",serif;
font-size: 1.875rem;
font-weight: 700;
border: .1875rem solid #fff;
border-radius: .375rem;
padding: 1.25rem 0;
text-align: center;
line-height: 1;
margin-bottom: 2.25rem
}
@media(max-width: 900px) {
.p-mv__lead {
font-size:3.3333333333vw;
margin-bottom: .625rem;
padding: .625rem 0;
line-height: normal;
border-width: .125rem
}
}
.p-mv__catch {
font-size: 3rem;
font-family: "M PLUS 1",serif;
font-weight: 700
}
@media(max-width: 900px) {
.p-mv__catch {
font-size:5.641025641vw
}
}
.p-mv__catch span.logo {
margin-left: .5rem
}
.p-mv__catch span.logo img {
width: 2.625rem;
height: 2.625rem;
margin-right: .375rem;
transform: translateY(2px)
}
@media(max-width: 900px) {
.p-mv__catch span.logo img {
width:1.375rem;
height: 1.375rem
}
}
.p-mv__catch span.text-s {
font-size: 2.25rem
}
@media(max-width: 900px) {
.p-mv__catch span.text-s {
font-size:3.5897435897vw
}
}
.p-mv__image img {
height: auto
}
.p-mv__h1 {
padding: 2.5rem 0;
background-color: #0e68cd;
text-align: center;
line-height: 1;
font-family: "M PLUS 1",serif;
font-size: 2.5rem;
font-weight: 700
}
@media(max-width: 900px) {
.p-mv__h1 {
font-size:1.25rem;
padding: 1.25rem;
line-height: normal
}
}  #purchase-area .purchase-area-flex {
display: flex;
justify-content: center;
gap: 0 100px;
}
#purchase-area .purchase-area-box {
width: 30%;
margin-top: 30px;
}
#purchase-area .purchase-area-box .annotation {
margin-bottom: 20px;
}
#purchase-area .purchase-area-box .purchase-area-box-detail .purchase-area-box-detail-title {
font-size: 20px;
font-weight: 700;
color: #014099;
margin-bottom: 20px;
}
#purchase-area .purchase-area-box .purchase-area-box-detail .purchase-area-box-detail-list li {
text-align: right;
line-height: 1.5;
margin-bottom: 10px;
}
#purchase-area .purchase-area-flex .purchase-area-img {
width: 50%;
}
@media screen and (max-width: 768px) {
#purchase-area .purchase-area-flex {
flex-direction: column;
}
#purchase-area .purchase-area-box {
width: 100%;
}
}
#blog .blog-section3 .photobox {
height: auto;
}
#blog .blog-section3 .photobox img {
width: 100%;
height: 50%;
}
@media screen and (max-width: 960px) {
.photobox {
height: auto;
}
#purchase-area .purchase-area-flex .purchase-area-img {
width: 80%;
margin: 0 auto;
}
}  .toner-ink-kaitori .main_visual .kaitori-title-h1 {
background-color: transparent;
margin-bottom: 50px;
}
#purchase-area .purchase-area-box {
min-width: 300px;
}
@media screen and (max-width: 960px) {
.toner-ink-kaitori .main_visual .kaitori-title-h1 {
margin-bottom: 20px;
}
#purchase-area .purchase-area-box {
min-width: unset;
}
}  .c-accordion__item .c-accordion__child .area-list-title {
padding: 1.3888888889vw 2.7777777778vw 0 2.7777777778vw;
}
.c-accordion__item .c-accordion__child .area-list-title a {
font-size: 18px;
color: #000;
}
@media screen and (max-width: 960px) {
.c-accordion__item .c-accordion__child .area-list-title a {
font-size: 16px;
}
}  .cam-bn-pc img {
width: 12.5vw;
max-width: 250px;
height: auto;
}
@media screen and (max-width: 480px) {
#top_header .logo_box .logo_text {
font-size: 11.5px;
}
}  .voice_shousai h2 {
color: #014099;
text-shadow: 0 0 5px white;
border-left: solid 7px #014099;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px, #e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px, #e9f4ff 3px, #e9f4ff 7px);
font-size: 23px;
padding: 0 0 0 10px;
}
#blog {
margin: 0 auto;
}  .voice_shousai h2 {
color: #014099;
text-shadow: 0 0 5px white;
border-left: solid 7px #014099;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px, #e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px, #e9f4ff 3px, #e9f4ff 7px);
font-size: 23px;
padding: 0 0 0 10px;
}
#blog {
margin: 0 auto;
}
.maker_img {
object-fit: contain;
}  .voice_shousai h2 {
color: #014099;
text-shadow: 0 0 5px white;
border-left: solid 7px #014099;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px, #e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px, #e9f4ff 3px, #e9f4ff 7px);
font-size: 23px;
padding: 0 0 0 10px;
}
#blog {
margin: 0 auto;
}  .maker_img {
object-fit: contain;
width: 100%;
}
.konpo-img {
width: 100%;
object-fit: contain;
aspect-ratio: 668 / 449;
}
.maker_inner p {
margin: 17% 0 5% 0;
}
.img-wd100 {
width: 100%;
height: auto;
object-fit: contain;
}
.toner-ink-kaitori .main_visual .sub_text {
margin: 120px 0 0 0;
}
.toner-ink-kaitori .main_visual .title_flex .title_inner_flex {
display: flex;
align-items: center;
width: 25%;
justify-content: center;
flex-direction: row;
}
@media screen and (max-width: 960px) {
#section1 .point_img1 {
width: 50px;
height: 45px;
}
.maker_img {
width: 150px !important;
height: 75px;
aspect-ratio: 2 / 1;
}
.konpo-img {
height: auto;
}
.toner-ink-kaitori .main_visual .sub_text {
margin: 50px 0 0 0;
}
}  .toner-ink-kaitori-area {
padding: 3%;
margin-bottom: 40px;
}
.toner-ink-kaitori-area__title {
background-color: #014099;
color: #fff;
text-align: center;
font-size: 28px;
padding: 16px 0;
}
.toner-ink-kaitori-area__sp-only {
display: none;
}
div.point_top {
padding-top: 60px;
}
.toner-ink-kaitori-area__contents-wrap {
margin-top: 40px;
padding-right: 2%;
padding-left: 2%;
}
.toner-ink-kaitori-area__items {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.toner-ink-kaitori-area__item {
width: 25%;
padding: 4px 0;
}
.toner-ink-kaitori-area__item a {
color: #014099;
}
.toner-ink-kaitori-area__contents-list-wrap {
margin-top: 20px;
}
@media (max-width: 767px) {
.toner-ink-kaitori-area__title  {
font-size: 18px;
padding: 12px 0;
}
.toner-ink-kaitori-area__sp-only {
display: block;
}
div.point_top {
padding-top: 40px;
}
.toner-ink-kaitori-area__contents-wrap {
margin-top: 40px;
}
.toner-ink-kaitori-area__contents-list-wrap {
margin-top: 14px;
}
.toner-ink-kaitori-area__item {
width: 50%;
}
}  div.blog-new-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 24px;
margin-bottom: 24px;
}
div.blog-new-grid .users_voice:first-child,
div.blog-new-grid .users_voice {
margin: 0;
}
div.blog-new-grid .users_voice {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.blog-new-grid .users_voice .photobox {
width: 211px;
height: auto;
aspect-ratio: 211 / 116;
margin: 0;
}
.blog-new-flex .flex {
justify-content: center;
}
.blog-new-flex .users_voice .flex p {
margin: 0;
}
.blog-new-flex .flex2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 425px) {
div.blog-new-grid {
grid-template-columns: 1fr;
}
}
.blog-new-grid .users_voice p.common_h3 {
font-size: 18px !important;
}
.blog-new-flex {
display: flex;
flex-direction: column;
}  .author-info-area {
margin-top: 40px;
position: relative;
}
.author-info-area__tag {
position: absolute;
top: -34px;
left: 0;
color : #fff;
font-weight: bold;
background-color: #014099;
padding: 4px 8px !important;
}
.author-info-box {
padding: 24px 20px;
border: 2px solid #014099;
background-color: #f9f9f9;
}
.author-info-box__inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.author-info-box__left-img-box {
width: 140px;
height: 140px; 
border-radius: 50%;
border: 2px solid #014099;
aspect-ratio: 1 / 1;
}
div.author-info-box__left-img-box img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50% !important;
display: block;
margin: 0 !important;
}
.author-info-box__right {
width: calc(100% - 200px);
padding-left: 24px;
}
.author-info-box__name {
font-weight: bold;
}
.author-info-box__text {
margin-top: 14px;
}
@media screen and (max-width: 768px) {
.author-info-box__inner {
flex-direction: column;
}
.author-info-box__right {
width: 100%;
padding-left: 0;
margin-top: 24px;
}
}
@media screen and (max-width: 425px) {
.author-info-area__tag {
top: -25px;
}
}