@charset "utf-8";
/* CSS Document okamura swiftLP */

.swiftmain{background: #f1c8ad21;}													
.swiftmain section{padding:3rem 0;}	
.swiftmain h2{text-align: center; font-size: clamp(20px,3vw,40px); margin: 3rem auto; color: #3b2e26;}
.swiftmain h2{ 
  position: relative; padding: 1em 0.5rem;　width: fit-content;
}
.swiftmain h2:after {
  content: '';
  position: absolute;
  left: 25%;
  bottom: 0;
  width: 50%;
  height: 7px;
  background: repeating-linear-gradient(-45deg, #3b2e26, #3b2e26 1px, #ffffff 2px, #ffffff 4px);
}
.swiftmain .num{font-size: clamp(36px,5vw,50px);}
.swiftmain .min{font-size: 0.8em;}
.swiftmain .big{font-size: 1.5em;}	
.swiftmain .txtred{color:#e10f28;}
.swiftmain .txtred02{color:#c30d23;}
.swiftmain .frame{font-size: 0.8em; padding:0.1rem 0.2rem; border: 1px solid #ffffff;}
img {max-width: 100%;
  height: auto;
}
	.marker{background: linear-gradient(transparent 70%,#f76f80);}
h1 {font-size: clamp(12px, 2vw, 16px);
  position: relative;
  padding: 0.5rem 1rem;
  border-bottom: 3px solid #000;
  border-left: 3px solid #000;
  border-radius: 0 0 0 20px;width: fit-content;
    margin: 0 0 0 auto;
}

h1:before {
  position: absolute;
  right: 50px;
  bottom: -21px;
  width: 0;
  height: 0;
  content: '';
  border-width: 21px 21px 0 0;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}

h1:after {
  position: absolute;
  right: 54px;
  bottom: -13px;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 14px 0 0;
  border-style: solid;
  border-color: #fdf8f4 transparent transparent transparent;
}
.fvimg  {margin-top: 0.5rem;}
/*--------------------------------------	#deskfv*/
	#deskfv{ }
.switchimg {margin:auto;  width: 100%;text-align: center;}
.switchimg img{border-radius: 50%;}
.questionwrap { background: #ffffff;margin: 1rem auto; max-width: 800px;
    width: fit-content;
    border: 10px solid #e0d8d2;
    outline: 3px solid #3b2e26;padding: 1rem;
}
	.question{  margin: 1rem auto;width: fit-content;
    text-shadow: 1px 1px 2px #ffffff, 1px 1px 2px black; font-size: clamp(14px, 3vw, 20px);
    line-height: 2rem;}
	.question li:before{
  content: ''; display: inline-block;
  width: 1rem;height: 1rem;
  background-image: url(/ws/landing/images/swiftdesk/icon_cheak.png);
  background-size: contain;
  vertical-align: middle;
}

	
/*--------------------------------------３つのメリット	#deskmerit*/
#deskmerit{background-color: #ffffff;}
	.tips_titles{margin: 5rem auto 3rem;  max-width: 800px; }
	.tip:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

	.tip{text-align: center; background: #3b2e26; margin: 1rem; padding: 3rem; border-radius: 50%; width: 200px; height: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    position: relative;}
.imgno{position: absolute;
    top: -1rem;
    left: -1rem;
    width: 5rem;
    height: 5rem;
    background: #e10f28;
    border-radius: 50%;}
.tip .imgicon{position: absolute;
    top: 1rem;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 6rem;
    height: 6rem;
}
.tip .icondesc{color: #ffffff;
    position: absolute;
    bottom: 10%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;}
.tip .icondesc .num{
	    font-size: clamp(30px, 3vw, 45px);  line-height: 2.5rem;}
	.tipsbox{max-width: 950px;
    margin: auto;
    padding: 3rem 1rem 1rem;
    background: linear-gradient(135deg, #e0d8d2 0%, #e0d8d2 50%, #f5e4e6 50%, #f5e4e6 100%);
    position: relative;
	}
		.tipsbox::before{
	   width: 174px;
    height: 48px;
    position: absolute;
    top:-1px; left: 50%;
    transform: translateX(-50%);
    background: url(/ws/landing/images/swiftdesk/arrow_bg.png) no-repeat top center / 174px;
    content: "";
	}

	.swiftmain .tipsbox .frame {
    font-size: 0.9em;
    padding: 0.1rem 0.2rem;
		line-height: 1.8rem;
    margin: 0.2em;
    border: 1px solid #3b2e26;
    background: #ffffff;
}
	.tipsbox ul{ margin: 2rem auto; padding: 1rem;}
.tips1,.tips2,.tips3{ margin: 2rem auto;  padding: 1rem 1rem 0;position: relative;
    background:#ffffffe3;;max-width: 750px;text-shadow: 1px 1px 1px #ffffff, 2px 2px 1px #ffffff, -1px -1px 1px #ffffff;}

.tipsbox h3{text-align: center;}
			.tips1{
	background-image: url(/ws/landing/images/swiftdesk/swift01.png);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position:right bottom;}
	.tips2{
	background-image: url(/ws/landing/images/swiftdesk/swifth03.png);
    background-size: 55%;
    background-repeat: no-repeat;
    background-position:1rem bottom;}
		.tips3{
	background-image: url(/ws/landing/images/swiftdesk/swift02.png);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position:105% bottom;}
	
	.meritaarea{ position: relative; width: 100%;max-width: 1200px; margin: auto;}
	.meritatxt{width: auto; padding: 2rem 1rem; background: #ffffff; border: 5px solid #dfd8d1; }
.meritatxt p{text-align: start; padding: 1rem;}
	.merita{ text-align: center; width: 5rem; margin: -2rem auto;}
	.meritb{border-top:2px solid #e10f28;border-bottom:2px solid #e10f28; padding: 0.5rem 1rem; width: fit-content; margin: 1rem auto;}
	.answer{ background: #3b2e26; color: #ffffff;
    font-size: clamp(14px, 2vw, 24px);text-align: center;margin: 3rem auto 0; padding: 1rem 0;}
	
/*--------------------------------------商品情報　#deskdesc*/
	
	.deskbox{display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;}
	.deskbox div:first-child{ box-sizing: border-box; width: 100%; }
	#deskdesc {max-width: 1000px; margin: auto;  }
	#deskdesc h3{font-size: clamp(16px,2vw,30px); line-height: 1.5em; padding:1rem; margin:2rem auto;}
	#deskdesc .frame{background-color:#3b2e26; color:#ffffff;}
	.deskbox table{ border-spacing: 1px;}
.deskbox th {padding: 1rem 0.5rem; width: 6rem; background:#dcd9d9;}
.deskbox td {padding: 1rem 0.5rem;background: #ffffff;}
	.deskports{display: grid; grid-template-columns: 1fr 1fr;
    gap: 0.3rem;}
.pricebox{margin: 3rem auto;text-shadow: 1px 1px 1px #ffffff, 2px 2px 1px #ffffff, -1px -1px 1px #ffffff; display: flex;
    justify-content: space-around;
    flex-direction: column;}
	.pricenext { text-align: center; position: relative; padding: 3rem 0;
    margin: -5rem auto;}
	.pricenext button{text-decoration: none; border: none;
    background: green;
    border-radius: 3rem;
    padding: 0.5rem 2rem;
    margin: 1rem;
    text-align: center;
    color: #ffffff;
    font-size: clamp(16px, 3vw, 24px);}
	.pricenext button:hover{opacity: 0.7;  transform: scale(1.02);}
	

	.sale{margin: 1rem auto; background-color: #ffffffc9;
    display: flex; width: 80%;
    flex-direction: column; text-align: center;
    line-height: 3rem;
    box-shadow: 2px 2px 3px #2c2c2c42;
    border-radius: 1rem;}
	.sale div{padding: 2rem 1rem; font-size: 1.2rem;
    font-weight: bold;}
	.limitedtag{ text-align: start;
    text-indent: 2rem; border-radius: 1rem 1rem 0 0;
    background-color: #e10f28; 
    font-weight: bold;
    color: #ffffff;
    font-size: 1.5rem;
    font-style: italic;
    letter-spacing: 0.1em;
    text-shadow: -3px 2px 0 #35323a;}
/*--------------------------------------取り入れ方アイディア　#comfortable*/
	#comfortable{background: #ffffff;}
	
	
	.ideasbox{
    text-align: center;
    margin: 0.5rem;
    padding: 1rem;}
.ideasbox img{	border: 10px solid #e0d8d2;
    outline: 3px solid #c30d23;
    padding: 5px;}
	
 .summary{ margin: 5rem auto;
    padding: 5rem 2rem;
    font-size: clamp(20px, 2vw, 40px);
    display: block;
    background-image: url(/ws/landing/images/swiftdesk/bgbtm.png);
    background-size: 200%;
    background-repeat: no-repeat;
    background-position: right bottom;}
.summary div{ 
			background: #ffffffcf;
    padding: 1rem;
    margin: -100px auto 100px; border-radius: 1rem;
    box-shadow: 2px 2px 3px #2c2c2c42;  font-weight: 500;
        font-family: fantasy;
        color: #3b2e26;}
			

@media all and (min-width: 768px) {
.swiftmain h2{margin:5rem auto;}
	
.pcnone{display:none;}
#main-container.staticPage {
        max-width: 1200pt;
        margin: 0 auto; }
	.meritatxt {display: flex; justify-content: center; flex-direction: row-reverse;align-items: center;  width: 80%;
        margin: 0 0 0 auto;}
		.question{ padding: 0rem 3rem;}

.swiftmain #deskfv h2{margin: 0rem auto 5rem;}
	
/*--------------------------------------３つのメリット	#deskmerit*/	
	.tips_titles {
    display: grid; grid-template-columns: 1fr 1fr 1fr;}
.tipsbox h3{margin: 0 0 1rem 2rem;text-align: initial;}
.tips1,.tips2,.tips3{background-size: contain; padding: 1rem 3rem 0; }
/*--------------------------------------商品情報　#deskdesc*/
		.deskbox{display: grid; margin: auto; max-width: 900px;align-items: start; grid-template-columns: 1fr 35rem;
        gap: 0.5rem;}
		.deskbox div:first-child{max-width: 100%;}
.pricebox{ justify-content: space-around;
    flex-direction: row;}
	/*--------------------------------------取り入れ方アイディア　#comfortable*/
	
.ideawrap{display: grid;
    grid-template-columns: repeat(2, 1fr);}
		.summary{ margin: 5rem auto;
    padding: 5rem 2rem;
    font-size: clamp(20px, 2vw, 40px);
    display: block;
    background-image: url(/ws/landing/images/swiftdesk/bgbtm.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right top;}
	
	.summary div{ background: initial;
        margin: initial;
        box-shadow: initial;
        border-radius: 1rem;
        box-shadow: 2px 2px 3px #2c2c2c42;
        width: fit-content;}
	.pricenext {
    text-align: end;
    display: block;
    padding: 3rem 0;
    margin: -5rem auto;
}
 #footer { margin: 8rem auto; }
		}